CSS 3 Column Layout Problem

@WeeBubbaJul 23.2008

hello there

i am faithfully trying to follow a tutorial for a 3 column CSS layout which I found ~~[URL=”http://www.pmob.co.uk/temp/3colcentred_2a.htm”]~~here[/URL].

I’ve spent countless hours on this trying to learn and better my skills. But I am still left with 2 problems now that I cannot fix despite my best efforts. I am wondering if somebody could please point me in the right direction on how i can fix my page.

my page i am designing is ~~[URL=”http://www.beepbeepbaby.com/test/index.html”]~~here[/URL].

i am trying to get the page to look like this page ~~[URL=”http://www.beepbeepbaby.com/”]~~here[/URL] (which was designed with nested tables). I am trying to redo this without tables as a learning exercise. Also my wife has been making content changes to this table based page and she keeps making mistakes and corrupting the tables. So i thought DIVS would be cleaner for her to understand.

anyway…my problems are:

1) the right hand DIV doesn’t sit in its proper place. I have applied a right hand border to it, but this is overlapping the top/bottom borders, rather than fitting snugly as the left hand border is.

2) in the third link you will see that there is a pink navigation bar with links on it spanning horizontally just below the header. In my HTML I tried adding another DIV just below the header DIV but it is getting kicked to the bottom of the page rather than fitting under the header.

Sorry for any trouble this is my wife’s business idea I just want to get it spot on for her. Many thanks.

to post a comment

CSS

46 Comments(s) _↴

@CentauriJul 24.2008 — #Looking at this with the visual groupings, it is not really a 3 column layout. It is more like a 2 column layout with the right hand main content section having two columns. As such, it is quite a bit different to that layout of Paul's, and should be approached in a different way. I will set this up locally and have a play with it, but may not get a chance to post back until tomorrow.

@WeeBubbaauthorJul 24.2008 — #hello centauri

thanks for your time with this. i would really appreciate any help you can offer.

@WeeBubbaauthorJul 26.2008 — #hello centauri

i have spent yesterday trying to fix this for myself, with a 2 column layout.

i have uploaded my work in progress here. it all looks OK (I think??) apart from one thing??

my content layer wrapper isn't stretching with the left and right DIVs. therefore you can see that there is no white background on the right DIV further down. if i can get my content layer wrapper to stretch then i could give it a white background in CSS and would look OK.

please could you help me find a solution for this?

@eloquentBohemiaJul 27.2008 — #In looking at your CSS, I notice some discrepancies:

On the [B]#main[/B], the max-width is 591px

add the [B]#mainRight[/B]: width:165 + padding(right/left):20 + right/left borders:8 = 193px

add the [B]#mainLeft[/B]: width:374 + padding(right/left):20 + right/left borders:8 = 402px

add both right and left together: 595px which is 4px larger than your [B]#main[/B] max-width of 591px.

You need to reduce the width of either of the right or left main divs, I suggest the left to start. There may be some other width issues which I do not see immediately, but these seem to be the most apparent.

For the background of the entire main, add [B]background-color:#fff;[/B] to the [B]#main[/B] CSS.

Also, just for note; your header CSS has no width attribute and I would change the #main [B]max-width[/B] to [B]width[/B] as IE has trouble with max and min widths.

Hopefully, this may remedy your problems, if not please let me know.

@WeeBubbaauthorJul 27.2008 — #hello, thanks for trying to help me. i appreciate it.

i have done as you asked and have posted the results here.

the problems seem to be:

1) the RHS DIV is not having 100% height so its RHS border isn't going all the way down.

2) the main DIV isn't stretching to accommodate the max height of its child DIVs therefore the white background isn't showing.

@eloquentBohemiaJul 27.2008 — #Let's do something step by step:

First: remove the left-border from the #mainLeft

Second: remove the right border from the #mainRight

Third: add left and right borders of 4px to the #main and reduce width by 8px

Fourth: add [B]background-color:#fff;[/B] to both #mainLeft and #mainRight

...that should correct the alignment and borders and hopefully the background

@WeeBubbaauthorJul 27.2008 — #i think this has taken a step back. perhaps. ive posted the new page here

@WeeBubbaauthorJul 27.2008 — #by the way, im viewing this in firefox. thanks again

@eloquentBohemiaJul 27.2008 — #I'm reading both the CSS and HTML right now and I see where I errored.

I'm in FF3 and looking at in IE also, which by the way loads it differently. (...of course)

I belive the problem is in the floating divs, but give me a minute.

@WeeBubbaauthorJul 27.2008 — #thanks for your time. please see my earlier comment. im viewing in firefox. if i could get the mainleft and mainright DIVS to auto expand their height according to the height of the container main DIV then this would do the trick i reckon!

@eloquentBohemiaJul 27.2008 — #Any div only expands as far as the content inside it and any padding you add to the CSS, so the left is longer but the right is shorter.

@WeeBubbaauthorJul 27.2008 — #ah i see. so that is why you are trying to put the borders on the main DIV to hide this problem?

@eloquentBohemiaJul 27.2008 — #This may sound strange but:

first: remove the float attribute from the #mainleft CSS

then

in your HTML page put the entire #mainRight div BEFORE the #mainLeft div

This allows the #mainRigh to clear the #mainLeft and the #mainLeft should fill the entire column with background white

@WeeBubbaauthorJul 27.2008 — #hi there.

thanks for that, its looking better. i hate to be a pain in the *** but the problem i got is that sometimes the RHS content will be longer than the LHS. and i wanted to shove this inside a template, so the background would be white no matter which side was longer...

@eloquentBohemiaJul 27.2008 — #As far as layout is concerned, what you have is essentially a one column div (the entire width) with a nested column inside (the #main and its left-margin under a header div) which in turn has two nested columns inside (the left and right mains respectively)

You may have to do some serious redesigning if you want this to work, which I can help you with.

@WeeBubbaauthorJul 27.2008 — #a-ha i think im getting somewhere! gimme 10 and ill post back! thanks again

@WeeBubbaauthorJul 27.2008 — #by the way absolutely DIG your website!

@eloquentBohemiaJul 27.2008 — #hi there.

thanks for that, its looking better. i hate to be a pain in the *** but the problem i got is that sometimes the RHS content will be longer than the LHS. and i wanted to shove this inside a template, so the background would be white no matter which side was longer...[/QUOTE]

Thanks (shuffles feet embarrassedly)

This is normal with multiple column layouts where one column has more content than the other, but there are ways of making the design work.

It may have to work this way:

inside your #wrap there will be, in this order:

a div containing only the main-top.gif 591px x 19px

then a div I'll call [B]#container[/B] at 591px wide and 202px left margin and no set height

which will contain within both your left and right divs

this container will have right/left borders of 4px and white background color

then the borders won't extend beyond the length of the inteior divs

@CentauriJul 27.2008 — #I had been having a look at this, but other commitments have delayed things, and keeping up with the posts since is difficult with changes happening .... A few things like float clearing (and the effect it has on margins), positioning of graphic elements and quashing some IE6 bugs needs to be attended to, but some things are heading in the wrong direction at the moment. I will continue with my version in the background...

@WeeBubbaauthorJul 27.2008 — #hi just before i try that look at my latest offering here

ignore the slight discrepance in header border i can resize image. the only problem i see now is that IE is putting scrollbars on my DIV!

@WeeBubbaauthorJul 27.2008 — #fixed that too.

so what do you reckon?

@eloquentBohemiaJul 27.2008 — #As Centauri said, floats are always a problem.

Adding to the right column really doesn't solve the problem because of what you said IE does.

I believe, as in my previous post, that you will have to put both the left and right divs within a container div which hs the borders and white background and a left margin

@WeeBubbaauthorJul 27.2008 — #and how do i get to know if there are cross browser issues etc ive only got ie7 and mozilla firefox 3 installed?

@WeeBubbaauthorJul 27.2008 — #well thanks for both your help i appreciate it and thanks centauri for looking at for me again

@CentauriJul 27.2008 — #Now all the content is pushed way to the right, and the right column drops in IE6 due to the doubled float margin bug.

@WeeBubbaauthorJul 27.2008 — #argh

ill concentrate on content for now and await any more help centauri. thanks. well at least i gave it another go

@eloquentBohemiaJul 27.2008 — #Remove the float attribute from the left div and in the HTML, put the entire right div before the left div

Remove any margin attributes from the right floating div

@WeeBubbaauthorJul 27.2008 — #sorry that didnt work it sent my layout haywire. maybe i did something wrong... if you are able to upload an example on your webspace that would be cool...

just trying to find out how to install ie6...

@WeeBubbaauthorJul 27.2008 — #argh i see what you mean now centauri it looks bad in IE6!

@eloquentBohemiaJul 27.2008 — #sorry that didnt work it sent my layout haywire. maybe i did something wrong... if you are able to upload an example on your webspace that would be cool...

just trying to find out how to install ie6...[/QUOTE]
Are you running XP?

@WeeBubbaauthorJul 27.2008 — #yep

@eloquentBohemiaJul 27.2008 — #Hi...

I'm back. Hope you don't mind, but I grabbed everything off the web to load on my site to work on.

Try this link: here

The only problem I see remaning is that the white part in your footer jpg is not the right size. It measures 571px, so it needs an extra 20px in width.

Tested both in IE6 and FF3.

@CentauriJul 27.2008 — #What is it with Canadians verses Aussies reworking sites (where are you WebJoel) ? ?

Here is my version of the site - I reworked the html for semantics (logical order of headings, lists where lists are appropriate etc), fixed up the footer graphic, and narrowed the mum2 graphic as it was too wide.

In relation to the main content issues, I floated #main to allow it to clear internal floats, gave it a top margin and applied the top border image to a <b> tag inside #main, and pulled the <b> back up above #main with a negative top margin. #mainright I floated to the left against #mainleft and gave it a left border as well - a negative left margin on #mainright overlaps the two borders so that it doesn't matter which column is the longest.

Cheers

@eloquentBohemiaJul 27.2008 — #Hey Centauri...

There's no "versus". ?

Like the layout and the footer fix.

How did you solve it?

I set the two floating right/left divs within a container and removed their margins, amongst other things.

@WeeBubbaauthorJul 27.2008 — #hello.

thanks for posting back again. thanks VERY MUCH for this help. you guys have given up your spare time to help me here and i am so grateful.

ive just got back from dinner, and i gotta get my kids ready for sleep, so i cant look proper now, will check back in a couple of hours.

@eloquentBohemiaJul 27.2008 — #After examining the CSS and HTML, I like [B]Centauri[/B]'s better than mine. He caught a couple of things I overlooked.

I'm going to seek some shut-eye, as it is 6 a.m. here in the Great North of Canada.

See ya later.

@WeeBubbaauthorJul 28.2008 — #thanks to you both. i will use centauri's solution as you suggest. but kudos to you both. i wouldnt have been able to do this without your help. im just happy theres kind knowledgable people like you willing to help dumbasses like me. ?

@WeeBubbaauthorJul 28.2008 — #hi

i hate to be a pain, but if i also wanted to have some pages with only 1 main DIV would this be a radical change or could i use the same CSS

e.g. see this page

@CentauriJul 28.2008 — #Not a radical change at all - just don't use the #mainleft and #mainright divs in the html. The page content would just follow the .topborder <b>, with vitually no change the the css.

@WeeBubbaauthorJul 29.2008 — #ok mate

ill give it a go tonight and post back to let you know how i went on.

@WeeBubbaauthorJul 29.2008 — #hello

thanks to your slick code you are absolutely right. the i removed mainleft and mainright and is almost perfect!! the only problem that remains is that there is no padding on the LHS and RHS for the text. i hate to be spoonfed and i hope you can see by my previous attempts that i am trying my best. but what is the best way for me to get this padding in? i tried putting a SPAN inside main with padding attached and also a sub single DIV with padding but to no avail. i think this is the last thing for definite!!

here is an example

@CentauriJul 29.2008 — #You can enclose the actual content within a div, and set the padding on that :

[CODE]  <div id="main">
 <b class="topborder"></b><!-- #BeginEditable "Content" -->
 [COLOR="Red"]<div id="onecolumn">[/COLOR]
 <h2>Terms & Conditions</h2>
 .
 .
 .
 <p>If you have any questions or concerns with respect to this Agreement or the Web Site you may contact a representative of BeepBeepBaby by e-mail at <a href="mailto:[email protected]">[email protected]</a>.</p>
 [COLOR="Red"]</div>[/COLOR]
 <!-- #EndEditable --></div>[/CODE]

[CODE]#onecolumn {
 padding: 0 15px;
 }[/CODE]

@WeeBubbaauthorJul 29.2008 — #? ? ? ? ?

you da man

@WeeBubbaauthorJul 29.2008 — #p.s. im from down the road in sydney what do you think of the concept? are you pregnant?

@CentauriJul 29.2008 — #are you pregnant?[/QUOTE]
Certainly hope not ! - although there was the recent news story of a guy being pregnant ..... ?

Concept and visual style of the site is quite good.

@WeeBubbaauthorJul 29.2008 — #a big thanks centauri for all your help.

finally. do you do paid work? if so can you PM me your details.

Also in #CSS _↴

marquee over image Small glitch in Opera and IE 5 Problems w/ float:left in NS/Win

Success!

Help @WeeBubba spread the word by sharing this article on Twitter...

Tweet This

CSS 3 Column Layout Problem

46 Comments(s) _↴

Also in #CSS _↴

Success!

Social

Version

CSS 3 Column Layout Problem

46 Comments(s) ↴

Also in #CSS ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

46 Comments(s) _↴

Also in #CSS _↴