Forums

Catasphere

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?


<!DOCTYPE html>

<html lang="en">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset-utf-8">
		<title>Tumble All Day</title>
		
		<style>
			* { margin:0; padding:0; }
			html, body { 
				height: 100%;
				background-color:#13171F; }
			#content_panel {
				position: relative;
				width: 60%;
				height: 100%;
				margin: 0 auto;
				background-color:#010712;
				box-shadow: inset 20px 0 20px -20px black, inset -20px 0 20px -20px black; }
		</style>
	</head>
	
	<body>
		<div id="left_main">
			<h1>Tumblr Theme #1</h1>
		
		</div>
		<div id="content_panel">
			
		
		</div>
	</body>
</html>

DogsGhost

you want three columns inside div#content_panel?

Catasphere

@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?

DogsGhost

I think I get what you're saying, and yes, each column needs to be its own div, quick mark-up would be something like:

<div id="header">
	<h1>Tumblr Theme #1</h1>
</div>
<div id="content_panel">
	<div id="col_1" class="column"></div>
	<div id="col_2" class="column"></div>
	<div id="col_3" class="column"></div>
	<div id="footer"></div>
</div>

I threw the footer div in for an easy clear on div#content_panel

Catasphere

Okay, I understand. Thanks DogsGhost!

Whats an easy clear?

DogsGhost

to 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.

Catasphere

oh 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?

DogsGhost

you can leave it empty. if you do its probably better to give it an ID of #clear or something that actually describes its purpose.

Eamonn

You 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 :)

Catasphere

@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?

whiteInkDesign

@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.

Eamonn

I 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 ;)

treehouse : what would you like to learn today?

Forums

Site layout troubles; Help appreciated