PDA

View Full Version : DIV layout advice



shimah
Aug 14th, 2007, 04:05 PM
Hey everyone

I'm currently trying to work out a layout using just DIVs. I considered floating some div's side by side but they wouldn't stay within my outer container which centers the whole content. I've attached an image below showing what I'm trying to achieve...

http://img102.imageshack.us/img102/8300/layoutqz6.gif

So far as a skeleton I was thinking something like,

<div>
<div></div>
<div style="float:left;"></div><div style="float:right;"></div>
<div></div>
</div>

Any ideas on how I could get the two side by side divs but still keep it within the outer div?

Thanks.

Jutlander
Aug 14th, 2007, 04:12 PM
I could compile two expandable columns for you, but do you have some code to show us, that you've worked on?

shimah
Aug 14th, 2007, 04:23 PM
I could compile two expandable columns for you, but do you have some code to show us, that you've worked on?

I don't know if you've seen my edited post. The issue I was having was keeping the two side by side divs inside the surrounding div, also preventing it from messing with the 'footer' div.

Please accept my apologies if my explanation of the problem is awful!

heyden
Aug 14th, 2007, 04:25 PM
Try this.



<div style="margin: 0 auto;width:400px;">

<div>header</div>

<div style="float:left;width:100px;">left</div><div style="margin-left:100px;width:300px;">right</div>

<div>footer</div>
</div>

shimah
Aug 14th, 2007, 04:34 PM
This is what I'm trying to resolve...

http://img527.imageshack.us/img527/6347/issuekk0.gif

heyden
Aug 14th, 2007, 04:40 PM
Whoops forgot something.



<div style="margin: 0 auto;width:400px;">
<div>header</div>

<div style="background-color: #FF0000;float:left;width:100px;height:100px;">left</div>
<div style="margin-left:100px;width:300px;">right</div>

<div style="clear:both;">footer</div>
</div>


That should do it.

shimah
Aug 14th, 2007, 04:50 PM
Whoops forgot something.



<div style="margin: 0 auto;width:400px;">
<div>header</div>

<div style="background-color: #FF0000;float:left;width:100px;height:100px;">left</div>
<div style="margin-left:100px;width:300px;">right</div>

<div style="clear:both;">footer</div>
</div>


That should do it.
Many thanks for this. Exactly what I was after!

ahallicks
Aug 14th, 2007, 04:58 PM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Simple Div Layout</title>
<style type="text/css">
* {
padding: 0;
margin: 0;
}

html {
color: #FFFFFF;
background: #CCCCCC;
font: 11px Tahoma, Verdana, Arial, "times New Roman", sans-serif;
}

#wrapper {
width: 766px;
height: auto;
margin: 10px auto;
overflow: hidden;
}

#header {
width: 766px;
height: 100px;
background: #990000;
margin-bottom: 10px;
}

#leftnav {
width: 250px;
height: 500px;
background: #990000;
float: left;
margin-right: 10px;
}

#content {
width: 506px;
height: 500px;
background: #990000;
float: left;
}

#footer {
width: 766px;
height: 80px;
float: left;
background: #990000;
margin-top: 10px;
}

</style>

</head>

<body>

<div id="wrapper">

<div id="header">
A Header
</div>

<div id="leftnav">
Navigation
</div>

<div id="content">
Content
</div>

<div id="footer">
Footer
</div>

</div>

</body>
</html>

Jutlander
Aug 14th, 2007, 05:17 PM
Sorry, was off coding a theme. I second ahallicks post here, as you shouldn't use inline style, but the general idea is the same yes. Just steer away from inline style.

heyden
Aug 14th, 2007, 05:39 PM
I was just using inline to get the example across. It can easily be moved into a css file.

Personally, I don't like how ahallicks handled the footer. Why float it left when you can just clear it? It seems like it is using more floats than are needed.

Jutlander
Aug 14th, 2007, 05:44 PM
Well, yes I would have cleared the footer too.

ahallicks
Aug 15th, 2007, 10:40 AM
Meh, force of bad habit from my old coding days... float the footer below and clear the remaining with 'overflow: hidden;' in the wrapper. Probably not the best way to go about things, but it works for me and adds no extra coding.