CSS Formatting (2 divisions inside a division wrapper

[OC4me]

Ok, I've got two columns existing side-by-side inside a holding division wrapper container. Here is my sample page: http://tinyurl.com/bvzkwna You can see that the second column named "Major Column" needs to auto-expand to fill the empty space between it and the "Minor Column" on the left. I'm not sure how to do it. I'm hoping to keep the "Major Column" division elastic and the "Minor Column" division a fixed width of 320px. Thanks for your suggestions. David P.S. I've embedded the CSS styling for development purposes.

Edited July 29, 2012 by OC4me

[OC4me]

Hi again, Can anybody help with this one, thanks! David

[ShadowMage]

Remove the float from the major column and move it (in your code) so it is below the minor column.

[OC4me]

Thanks Dovahkiin, I tried that and got this http://tinyurl.com/chtdw64, which is not formatted properly (the columns should be side-by-side) and not stacked. Did I understand you correctly:

Remove the float from the major column

Done.

and move it (in your code) so it is below the minor column.

Here I think I might not have understood. I took this suggestion to mean that I should put the ColumnMajor CSS below (or after) the ColumnMinor CSS. Did you mean place the ColumnMajor div below the ColumnMinor div in the HTML itself? If so, I'd really prefer not to have to do that because the MajorColumn div will hold my prime page content. Thanks as I still need help with this issue. David

[dsonesuk]

I'd really prefer not to have to do that because the MajorColumn div will hold my prime page content.

???? I can't see what difference that would make the MajorColumn div will STILL hold prime page content, it's just the stacking of html layout will be different.

[OC4me]

???? I can't see what difference that would make the MajorColumn div will STILL hold prime page content, it's just the stacking of html layout will be different.

It is a standard SEO best practice to put the prime (most relevant) content first in the HTML and the least relevant content last. Anyway, I still do not understand completely the original help suggestion. Please see the latest format here: http://tinyurl.com/chtdw64 (note the new formatting problem because the two columns are now stacked, rather than side-by-side).

[dsonesuk]

Then you would have to use float: right; width: 100%; for #ColumnMajor, and remove float: left from #ColumnMinor.

[OC4me]

dsonesuk, Thanks again. I really do appreciate your assistance. I tried the last suggestion and I get this: http://tinyurl.com/crjpdpo The formatting is still not correct (ColumnMinor needs to sit against the left edge and ColumnMajor needs to be elastic, filling the remaining whitespace). Also the content in the two divisions no longer resides where it should be. My original page (http://tinyurl.com/bvzkwna) is basically correct except for ColumnMajor not occupying 100% of the available whitespace. Thanks, David

[dsonesuk]

remove margins and position: relative; from columnminor

[ShadowMage]

As dsonesuk mentioned, my original suggestion was to move the HTML code for your MajorColumn div below the MinorColumn div and remove the float from the MajorColumn. AFAIK, this is the only way to get the MinorColumn to stick to the left and have the MajorColumn be elastic because if you float MajorColumn (as in the latest suggestion from dsonesuk), it will not fill all available space, but instead shrink to fit whatever content is inside it.

[dsonesuk]

if you float MajorColumn (as in the latest suggestion from dsonesuk), it will not fill all available space, but instead shrink to fit whatever content is inside it.

That is where width:100%; comes in post#7 to force it to the total width available, unless it only work in my magical browsers AGAIN!

[ShadowMage]

That is where width:100%; comes in post#7 to force it to the total width available, unless it only work in my magical browsers AGAIN!

That makes it 100% of its parent's width not 100% of available space. Would this not render the float useless and overlap the MinorColumn?

[dsonesuk]

That where the max-width: comes in, width: 100%; to max-width:620px; The other optioni is to give side panel overflow: hidden; remove min-width:, remove width:100%;, add margin-left: 320px; same as sidepanel

Edited August 6, 2012 by dsonesuk

[ShadowMage]

But what happens when the div would normally need to be much smaller? If that 620px is small enough to fit in its parent but too big to fit in the space available? Or if it never reaches 620px but stays at, say, 500px? In such situations, it would overlap the MinorColumn. EDIT: Just tested it in FF (using the link from OP's latest attempt) and it does indeed overlap (well actually it goes behind) the MinorColumn.

Edited August 6, 2012 by ShadowMage

[dsonesuk]

It can be done, you have to restrict the container? (is this valid, heard of section, article but not container) to min-width total of both container elements 640px approx, then using combination of margin-left, overflow hidden, it should work, i'm sure i did something very similar because of the same seo reason.

[dsonesuk]

OK! found it! you know when you have a outer container surrounding floated child elements, that the outer container does surround the these child elements, but remains as height:0; which is usually a pain, but for this is a advantage, place a outer container round ColumnMajor, and call it id="ColumnMajor_spacer" and add css

#ColumnMajor_spacer {margin-left:320px; height:0px;  }  #ColumnMajor{min-width:320px;max-width: 620px;float:right; width:100%;   }

i replaced <container> with <div id="container"> removed css styling from body and applied them to the container

#container{/*margin: 0;*/font-size: 100.01%;    margin: 0 auto;    max-width: 940px;    min-width: 640px;    /*overflow: hidden; causes problem ie7*/}

replace border id ref to classes, you can't use multiple identical id ref within a page they must be unique.

[OC4me]

Ok, great guys! Let me have some time to play around with each suggestion and see how it goes. My goal is to allow the desktop browser format to collapse gracefully when viewed in the smaller screens available on mobile browsers. In the case of a small mobile screen, ColumnMajor and ColumnMinor will be forced into a stacked arrangment, rather than having ColumnMajor forced off the screen on the right.