Jump to content

CSS Formatting (2 divisions inside a division wrapper


OC4me
 Share

Recommended Posts

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 by OC4me
Link to comment
Share on other sites

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
Link to comment
Share on other sites

???? 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).
Link to comment
Share on other sites

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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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!
Link to comment
Share on other sites

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?
Link to comment
Share on other sites

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 by ShadowMage
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...