A matter of CSS

[Smithy]

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;

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?

 

[Smithy]

My naming convention is irrelevant, but I do use proper, useful names for divs and variables in coding.

 

[Smithy]

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.

 

[Smithy]

The content within the middle div is dynamically created. Eventually the site will be a CMS driven by php.

 

[Smithy]

Thanks for your input anyway.

 

[Smithy]

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.

 

[Smithy]

Another MSPaint masterpiece to demonstrate what is happening at the moment;

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.

 

[Smithy]

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.

 

[Smithy]

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;

<div id="container">
  <div id="left"></div>
  <div id="right"></div>
  <div id="center"></div>
</div>

CSS;

#container {
  width:960px;
}

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

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

That's the basics of it.

 

[Smithy]

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.

 

[Smithy]

If the left column is of fixed width, the only css the central column needs is

#center 
{
width:auto;
margin-left:150px; /*or more if you want spacing between the divs*/
}

With that code, and that markup it behaves the same in every browser

This will help with bringing the central div to sit alongside the left div, but the central div will still fill the rest of the space to its right, pushing the ride div down beneath it.

 

[Smithy]

At this stage in the build I'm not sure whether each page will definitely contain the right div. So far I have attempted to build the site to allow for either scenario, truly dynamic. It's not going to happen though.

From here on I'm going to construct each page as if it's a known that the page will either contain the right div or it will not. This will allow me to create 2 separate ids for the center div; one which accommodates the right div and one which does not. This means I can give an exact width value to each id.

I don't like admitting a compromise, but the limits of CSS have been reached.

 

[Smithy]

The problem I'm now having is that because the divs are floating, the left and right divs aren't inheriting the height of the container div. This is a problem because the right div has a border-left applied to it. Obviously if the right div isn't at full height then the border won't be at full height either. Which means it stops half way down the container.

Is there a way I can get the right div to assume maximum height so that the border stretches to the bottom?

Another Paint illustration to demonstrate;

 

[Smithy]

vaultingSlinky, thanks for your time here. The project manager informed me on Friday that every page will now contain the right div, which makes things considerably easier.