4 replies [Last post]
Greg-J.com
Offline
Enthusiast
Last seen: 11 years 6 weeks ago
Joined: 2005-04-27
Posts: 71
Points: 0

I've been using CSS to complement my html for quite a while now, but I'm only just now making the slow transition from tabular structure into pure (or mostly pure) CSS design. So far I love it, as I'm able to do with one div tag what would take me several lines of html to accomplish. And editing the entire site with one page.. priceless.

The only real thing I'm having trouble with is divs and nested divs. I have my entire page inbetween <center></center> tags. I have a single div that is 680px wide for my body. Within this I need to divide it into two sides, left and right. How can I nest divs and place them side-by-side?

There must be a ton of examples out there, but I've searched and am either searching for the wrong thing or google hates me.

If anyone could point me in the right direciton, I would be very greatful.

rmfred
rmfred's picture
Offline
Elder
Rock Springs, WY
Last seen: 1 year 25 weeks ago
Rock Springs, WY
Timezone: GMT-6
Joined: 2004-01-31
Posts: 1073
Points: 31

[solved] side-by-side divs when using &lt;center&gt;

Get rid of the center tags...
Then search this site or google for css centering
then search for css 2 column layouts

Let us know how you get on Smile

Greg-J.com
Offline
Enthusiast
Last seen: 11 years 6 weeks ago
Joined: 2005-04-27
Posts: 71
Points: 0

[solved] side-by-side divs when using &lt;center&gt;

Thanks for the help. The centering problem was easy to fix, but wrapping my brain around this 2 column div thing is impossible. I'm just trying to tell myself that it's better than tables...

I found this site http://www.456bereastreet.com/lab/developing_with_web_standards/csslayout/2-col/

that states Simple 2 column css layout, but there's more there than if I just did it in tables no?

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 7 years 27 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

[solved] side-by-side divs when using &lt;center&gt;

at its simplest, your page should be something like this...

CSS---

body {width:680px; margin: 0 auto;}
#left {float:left; width:49.5%;}
#right {float:right; width:49.5%;}

html

<body>
  <div id='left'>
  your left cell content
  </div>
  <div id='right'>
  your right cell content
  </div>
</body>

which has saved you two elements already.

Greg-J.com
Offline
Enthusiast
Last seen: 11 years 6 weeks ago
Joined: 2005-04-27
Posts: 71
Points: 0

[solved] side-by-side divs when using &lt;center&gt;

Alright, all is well. There's still some things about the length of the nested divs I don't like, but I have a fix that works for me.

In FireFox:

My newest problem is the #body div has a background, but when I add the #left and #right contained divs, regardless of wether there is background or not - the #body divs background is no longer visible.

don't confuse #body for body

html:

<!-- BeginBody -->
<div id="body">
  
  <div id='left'>
  your left cell content
  </div>
  
  <div id='right'>
  your right cell content
  </div>

</div>
<!-- EndBody -->

css:

#body {
	width: 680px;
	background-image:  url("images/body.bg.gif");
	background-repeat: repeat-y;
	}	

#left {
	float:left; 
	width:189px; 
	background-color:#FF0000;
	height: 496px;
	padding: 3px 0px 3px 11px;
	text-align: left;
	}

#right {
	float:right; 
	width:468px;
	height: 496px;
	padding: 3px 11px 3px 0px;
	text-align: right;
	background-color:#0000FF;
	
	}

When I comment out #left and #right, the #body div background becomes visible again.

.::UPDATE::.

I found the answer in another post by createErrorMsg:

Quote:
I assume it's the #container divs background that isn't showing up? This is because all of the content inside of the #container div is floated. Floated elements are removed from the flow, and therefor do not have any interaction with other elements, including their parent containers. This means that the floated divs cannot influence the height of the container. In effect, the #container div does not know that it has anything in it, and therefor it has no height.

The solution is to float the #container. This forces the container to expand and enclose it's floated children.

IE and Opera do this automatically, but it is a spec violation to do so. Firefox and NS7 have it right. Floats should not be contained unless the designer specifically instructs the browser to do so (by floating the container).

Regardless, add float:left; to #container and you should be fine.

On a side note, your post above is very long and much, if not most, of what is there is not relevant to the problem you're trying to solve. It's helpful if you pare down the code prior to posting so that we're only looking at the relevant peices, rather than the entire page.

cEM