- This topic is empty.
-
AuthorPosts
-
May 8, 2011 at 3:16 am #32634CatasphereMember
Hello. Basically, I want to make a 3 column-ish website. I have this base, but when I try to add a header, it ruins the layout by pulling the middle div element down. Is there any way to add more DIVs to the left and right columns without ruining the layout?
I’m thinking I have to actually make a separate left and right DIV element instead of just having a body and a middle.
Help?
Tumble All Day
Tumblr Theme #1
May 8, 2011 at 3:23 am #77270DogsGhostMemberyou want three columns inside div#content_panel?
May 8, 2011 at 3:31 am #77252CatasphereMember@DogsGhost: No, I’m saying that maybe the only way to make a 3 column layout how I want it is to make 3 divs.
So 3 different divs inside body to make a 3 column, as opposed to using the body with just a middle. Get me?
May 8, 2011 at 3:37 am #77253DogsGhostMemberI think I get what you’re saying, and yes, each column needs to be its own div, quick mark-up would be something like:
Tumblr Theme #1
I threw the footer div in for an easy clear on div#content_panel
May 8, 2011 at 3:39 am #77254CatasphereMemberOkay, I understand. Thanks DogsGhost!
Whats an easy clear?
May 8, 2011 at 3:41 am #77255DogsGhostMemberto make the columns you have to float div.column.
Then you put clear:both on div#footer. This keeps div#content_panel from collapsing.
Sorry if you don’t understand that, I’m bad at explaining things without using jargon, look up articles on floating divs for better info.May 8, 2011 at 3:43 am #77251CatasphereMemberoh okay. In order to do this, do i have to have a footer though? Or can i just leave the markup for the footer empty and just add clear:both to the css?
May 8, 2011 at 3:45 am #77241DogsGhostMemberyou can leave it empty. if you do its probably better to give it an ID of #clear or something that actually describes its purpose.
May 8, 2011 at 5:59 am #77231EamonnMemberYou could leave out the footer, but give the div#content_panel the attribute of clear:both. In fact, leaving the footer div out of the content div is better semantically anyway. DogsGhost is correct also in correcting the name of that div – try content-col-wrap or something.
I often double up on my clear:both’s by giving the attribute of overflow:hidden as well – this makes sure that the content_panel actually wraps around the entireity of the nested columns and lets you apply a nice faux-columns background image :)
May 8, 2011 at 5:42 pm #77157CatasphereMember@Eamonn if i give the div#content_panel the clear:both; att, it ruins the layout because it slides down due to the 2 floating left and right columns. How do i go about that?
May 8, 2011 at 5:53 pm #77159whiteInkDesignMember@Eamonn giving a container div clear:both does NOT prevent it from collapsing if all its contents are floated. The fact that you’re giving it overflow:hidden is what is preventing the containing div from collapsing. Personally I think using overflow to clear is more of a hack than using a clearing div (if I give the container a set height its content can get cropped), and in my own practice don’t use either but actually use the pseudo-element clearfix as it is the cleanest imo.
May 9, 2011 at 9:29 pm #76964EamonnMemberI know you need the overflow:hidden attribute to prevent it from collapsing – that’s why I suggested it. Nor do you need to apply any height attribute at all.
The clearfix method is, as you say, the best way there is to prevent wrap collapse, as it doesn’t apply a secondary effect (hiding overflow, in this case). It is itself, however, most definitely a hack. Not that there’s anything wrong with that either ;)
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.