A matter of CSS

Associate
Joined
9 Mar 2006
Posts
1,536
Location
East London
Hi, I have a content div (div1) which sits central to the page by use of auto margins. Within this div are 3 divs (div1a, div1b, div1c) in a 3 column format. div1a is a sub nav div, it needs to sit on the left side of div1. div1b is the main page content, it sits in between the other two divs. div1c is a narrow column populated dynamically (by php) with links to documents, other articles etc, it needs to sit on the right side of div1.

Observe;
masterpiecef.jpg


The problem is that div1's height needs to be dependent on the content from div1b. At the moment div1a is float:left, and div1c is float:right. What happens is that div1b assumes the full width of div1, presumably because div1a and div1c are floating. This causes wrapping of the content in div1b around the other two divs (becuase the other two divs aren't assuming full height of div1). This isn't good.

div1a and div1c need to be full height of div1 (which, as previously stated, is dynamically attributed by the content of div1b). Even simpler; div1a, div1b and div1c need to be the same height.

I'm aware that I could affix definite widths to all 3 divs and have them sit next to eachother within the fixed width of div1, but some pages on the site will not have div1c, so div1b needs to have a variable width.

So how do I do it?
 
Last edited:
Are your divs actually called "1, 1a, 1b and 1c"? Why don't you give them more descriptive names, it'll make it easier for yourself in the long run (and us trying to help you).

For example you should name your "div1" wrapper or something.

Have you floated "div1b" (the central content area) at all?
 
My naming convention is irrelevant, but I do use proper, useful names for divs and variables in coding.
 
You need to float the middle div as well.

Here is how I would do it:

<html>
<head>
<title>OcUK Example</title>
<style type="text/css">
#divContainer {
width: 800px;
height: 500px;
margin: 0 auto;
border: 1px solid red;
}
#divContainer #left {
width: 149px;
float: left;
border-right: 1px solid red;
min-height: 500px;
background: #cccccc;
}
#divContainer #middle {
width: 500px;
float: left;
border-right: 1px solid red;
min-height: 500px;
background: #FFFF00;
}
#divContainer #right {
width: 149px;
float: left;
min-height: 500px;
background: #cccccc;
}
</style>
</head>
<body>
<div id="divContainer">
<div id="left">left content</div>
<div id="middle">middle content</div>
<div id="right">Right Content</div>
</div>
</body>
</html>

Something to note - I would have the stylesheet externally referenced, it's in the document as an example.

Hope this helps.
 
Hi swinnie, I'm aware I could have fixed widths to all 3 divs and float them next to each other, but not all pages on the site will have the right div, so the middle div needs to be able to use a variable width. The containing div is a fixed width however.
 
The content within the middle div is dynamically created. Eventually the site will be a CMS driven by php.
 
No it isn't. Especially when it would make anyone who's trying to help you understand what you're saying better.

I'll leave you to it.
Since the naming of the divs bares no reflection to the outcome of the solution, it matters not how I, you, or anyone else names the divs. I could call them 1, 2 and 3, or a, b and c, or leftdiv, middle div and rightdiv. It makes no odds for the purpose of this request for help.

What's more; swinnie was able to interpret the naming convention and devise his own based on my explanation. A fine example of the insignificance of the naming of the divs.
 
Another MSPaint masterpiece to demonstrate what is happening at the moment;
93869049.jpg


I've attempted to let divDick dictate the height of the container div. I've set divTom and divHarry to height:100%. In order for the height:100% to work properly, the container div needs a height value. I'd have thought that by setting this value to 100% also, that would do the trick.

What's happening is that divDick is taking the full width of the container div, but the content of divDick is wrapping around the floating divs. Normally this would be ok, but there is a border-left applied to divHarry which should run the entire height of the container div.

The other problem is that because the content of divDick is dictated by the wrapping around the floating divs, it means that I can't effectively apply margins to that div.
 
It would be, but the trouble with following generic guides like that for CSS solutions is that they rarely work with what you have already built. As is the case here. I tried it but it destroyed the layout of the rest of the site. I'd be creating more work for myself by trying to implement that solution and have it working with my current site structure.

It also wouldn't work for when the right div is removed.
 
Another MSPaint masterpiece to demonstrate what is happening at the moment;
93869049.jpg


I've attempted to let divDick dictate the height of the container div. I've set divTom and divHarry to height:100%. In order for the height:100% to work properly, the container div needs a height value. I'd have thought that by setting this value to 100% also, that would do the trick.

What's happening is that divDick is taking the full width of the container div, but the content of divDick is wrapping around the floating divs. Normally this would be ok, but there is a border-left applied to divHarry which should run the entire height of the container div.

The other problem is that because the content of divDick is dictated by the wrapping around the floating divs, it means that I can't effectively apply margins to that div.

From that picture, it looks to me that DivTom and DivHarry are sitting inside of DivDick.

html:
<div id="DivDick">
<div id="DivTom"></div>
<div id="DivHarry"></div>
</div>

Where in your first pic (OP) you describe;

html:
<div id="DivTom"></div>
<div id="DivDick"></div>
<div id="DivHarry"></div>

Any links to your source, to see the html and css?
 
Last edited:
From that picture, it looks to me that DivTom and DivHarry are sitting inside of DivDick.

Indeed, this is because the left and right div are floating and the center div is taking the full dimensions of the container div.

The first picture is how I want it to end up looking, the second is what I've achieved. My html looks like the below;
Code:
<div id="container">
  <div id="left"></div>
  <div id="right"></div>
  <div id="center"></div>
</div>
CSS;
Code:
#container {
  width:960px;
}

#left {
  float:left;
  width:150px;
}

#right {
  float:right;
  width:200px;
}

That's the basics of it.
 
Indeed, this is because the left and right div are floating and the center div is taking the full dimensions of the container div.

The first picture is how I want it to end up looking, the second is what I've achieved. My html looks like the below;
Code:
<div id="container">
  <div id="left"></div>
  <div id="right"></div>
  <div id="center"></div>
</div>
CSS;
Code:
#container {
  width:960px;
}

#left {
  float:left;
  width:150px;
}

#right {
  float:right;
  width:200px;
}

That's the basics of it.

Code:
<div id="container">
  <div id="left"></div>
  <div id="center"></div>
  <div id="right"></div>
</div>
CSS;
Code:
#container {
  width:960px;
}

#left {
  float:left;
  width:150px;
}

#center{
  float:left;
  width:auto;
}

#right {
  float:left;
  width:200px;
}

Try that for starters to make it look like your first pic.
 
It would be, but the trouble with following generic guides like that for CSS solutions is that they rarely work with what you have already built. As is the case here. I tried it but it destroyed the layout of the rest of the site. I'd be creating more work for myself by trying to implement that solution and have it working with my current site structure.

It also wouldn't work for when the right div is removed.

Yer know what you're saying. But that layout has been tried and tested - hence the name :)
 
The problem is that CSS is not the great web design saviour some people hope it would be. Its got its limits and flaws, also its interpretation between browsers differs.

You have to try and work within its bounds and be open to the fact that somethings still can't be done with CSS.
 
Try that for starters to make it look like your first pic.
The problem now is that the center div assumes the full width of the container div. This is because the center div contains long paragraphs that are pushing it out (width:auto is the culprit).

With the center div at full width, it pushes the left div above it and the right div below it. So you end up with the divs stacked on top of each other.
 
Back
Top Bottom