Hello World

G

gaspoweredtoast

New Member
Title is because this is my first post and new to this forum, but I really joined cause I am new to HTML, CSS, and Javascript for making websites. I made a div container and put another one in it... it has float:right; and that's a problem... when it floats right it takes the .Container and make the background non existent and I was just wondering why... of course I can still <br> to expand the white space PAST the image to make it looks good, but I was just wondering if there is another solution...

HTML: 
<!DOCTYPE html>
<html>
	<head>
		<title>YoYoMcAwesome's Comics</title>
		<script>
		</script>
		<style>
			.Body
				{
					margin:auto;
					background-color:rgb(200,200,255)
				}
			.Container
				{
					margin-left:auto;
					margin-right:auto;
					position:relative;
					top:0px;
					width:940px;
					background-color:rgb(255,255,255);
				}
			.Container002
				{
					float:right;
				}				
		</style>
	</head>
	<body class="Body">
		<div class="Container">
			<div class="Container002">
				<img src="Bear.png"></div>
		</div>
	</body>
</html>
 
G

gaspoweredtoast

New Member
Hmm, I was wrong about line breaking.. even though Container002 is in Container the Container having line breaks in it make the bear go down... D:
 
A

Apokalupsis

New Member
I'm not sure I understand what you are trying to achieve.

What do you mean "makes the background non-existent"?

Maybe you are referring to the white space around the image itself? If so, that's because the image may not have a transparent background (that's a graphic issue, not coding issue). You also have 2 different bg colors (one for body, one for .container). Is that intentional?

Using your code, I've set it up in jsfiddle: http://jsfiddle.net/Apokalupsis/jBVuR/ It looks fine to me.

What is this doing that you want to do differently?

Are you wanting to have a page bg, then also have a different bg color for the containers?

Where exactly do you want the image to appear on the page? left, center or right?

------------

Here it is again with:

1) % width in container (vs fixed) - if you want to go back to fixed (940px) just change the % to 940px
2) both containers having the same bg color (just removed the bg code from .container for this effect).
3) div dimensions set (width/height)

http://jsfiddle.net/Apokalupsis/jBVuR/4/

Here it is with page background + image container background: http://jsfiddle.net/Apokalupsis/jBVuR/5/ (which may have been what you were asking all along).

The bg color needs to be set in the .container002 class not the container class. Also, height/width was not set earlier. I think these 2 issues are what was causing the challenges.


---------------------

TIP - to see why formatting doesn't work the way we want, try adding "border: 2px red dashed;" (or something similar that allows you to see the edges of the container) to it. By doing so, you can see exactly how the container looks and is placed.
 
Last edited:
ronaldroe

ronaldroe

Super Moderator
Staff member
Add the following at the end of your CSS and see if it doesn't help:
Code: 
.Container::after{
  content:"";
  display:block;
  clear:both;
  width:0;
  height:0;
}
 
You must log in or register to reply here.
Top