PDA

View Full Version : Simple Div column Layout Eludes Me - Help Plz


BrackAttack
06-05-2009, 05:29 AM
I'm new to Div layout design, and I am slowly getting the hang of it. I am not having any luck with my newest attempt, and was hoping someone could show me the way.

In my content section, all I want to do is create two div boxes side-by-side on one row, and then three div boxes side-by-side directly below them on the next row.

I started with a div "wrapper" box for the content section of my site. Then I inserted the next Div inside that, then the next, and next...everything is working out and I get two on top and one on the bottom with some simple css, but then I attempt to add the last two divs on the bottom and I can not get them to format correctly. Ug!

Is my approach sound? How can I get the last two (of three) boxes to fit under the top two boxes?

Thank you.

Corrosive
06-05-2009, 06:13 AM
I'm new to Div layout design, and I am slowly getting the hang of it. I am not having any luck with my newest attempt, and was hoping someone could show me the way.

In my content section, all I want to do is create two div boxes side-by-side on one row, and then three div boxes side-by-side directly below them on the next row.

I started with a div "wrapper" box for the content section of my site. Then I inserted the next Div inside that, then the next, and next...everything is working out and I get two on top and one on the bottom with some simple css, but then I attempt to add the last two divs on the bottom and I can not get them to format correctly. Ug!

Is my approach sound? How can I get the last two (of three) boxes to fit under the top two boxes?

Thank you.

Maybe try having two sub wrappers. A top one which has the top two boxes in it and then one underneath which has the three boxes in it. Have a look at this...

http://www.glbrassandwindrepair.co.uk/

We've kind of done the same thing here.

edbr
06-05-2009, 08:04 AM
i agree
a wrapper div
a header div
a content div
a content 2 if yo wanted
inside of the content you can float your columns

then a footer div. as a general idea of course

BrackAttack
06-05-2009, 05:14 PM
a wrapper div - check
a header div - check
a content div - check
a content 2 if yo wanted
inside of the content you can float your columns - ah ha!
then a footer div. - check

This makes sense...I suppose I was unintentionally blinding myself to this solution because I am trying so hard not to over complicate my code (which I always seem to do).

Thank you.

BrackAttack
06-05-2009, 06:10 PM
Hi. I created two content div containers (upper and lower), and put two boxes in the top one, and three boxes in the bottom one. ...however, the bottom three boxes don't sit side-by-side, but instead, the last box sits under them all, which is not what I want.

It has something to do with the upper content box, because if I remove the upper content box completely, the three bottom div boxes sit side-by-side as I want. Any ideas what I am doing wrong?

Here is my code:

}
#content {
}
}
#ContentBox1up {
}
}
#ContentBox2down {
}

#maincontentleft {
font-family: Verdana, Geneva, sans-serif;
float: left;
height: 200px;
width: 640px;
background-color: #FFF;
}
#subsribeboxright {
font-family: Verdana, Geneva, sans-serif;
background-color: #FF9;
float: right;
height: 200px;
width: 305px;
}
#contentleftbottom {
font-family: Verdana, Geneva, sans-serif;
background-color: #60F;
height: 200px;
width: 320px;
float: left;
}
#contentmidbottom {
font-family: Verdana, Geneva, sans-serif;
background-color: #F0F;
height: 200px;
width: 320px;
float: right;
}
#contentrightbottom {
font-family: Verdana, Geneva, sans-serif;
background-color: #3CF;
float: right;
height: 200px;
width: 305px;
}

<div id="content">

<div id="ContentBox1up">
<div id="maincontentleft">Content for id "maincontentleft" Goes Here</div>
<div id="subsribeboxright">Content for id "subsribeboxright" Goes Here</div>
</div>

<div id="ContentBox2down">
<div id="contentleftbottom">Content for id "contentleftbottom" Goes He asd rea</div>
<div id="contentmidbottom">Content for id "contentmidbottom" Goes He asd rea</div>
<div id="contentrightbottom">Content for id "contentrightbottom" Goes He asd rea</div>
</div>

</div>

Corrosive
06-05-2009, 06:20 PM
Try floating all your 'inner' columns left.

BrackAttack
06-05-2009, 06:24 PM
That did it! Shoot! I tried so many different variations of float left and right, but never all left. duh.

So... for in the future I'd love someone to help me understand what/when the right time to use right v.s. left and such, because I still feel it should have worked before kinda.

Thank you for everyone's help!

Corrosive
06-05-2009, 06:27 PM
Well really you were floating your middle column, on the bottom, right so it was pushing the last column below it. I just stick with float: left; 99% of the time to be honest.

Corrosive
06-05-2009, 06:38 PM
No problem with you posting code btw but would you mind wrapping it in code tags please. Many thanks.

coloeagle
06-05-2009, 07:50 PM
I'd love someone to help me understand what/when the right time to use right v.s. left and such, because I still feel it should have worked before kinda.
Depends really on how you want the coding vs display.

In simple;
Normally you would float them all left as this allows your code to match the display order. First column is first in code, second is second and third is third.

If you want to have the third column be first in code and the first column to be last you would float them all right.

If you want to have the center column last in the code, you would float one left, one right and no float to the center. This would make the center column move up to fill in the gap between the two floated columns.

BrackAttack
06-05-2009, 10:31 PM
Thanks for the info above!

So, why do I have line breaks under each div box?

As per earlier posts, I now have two rows of "content" div boxes (each with 2, and then 3 boxes within). Everything looks great in Dreamweaver design view, except when I preview the page in safari and firefox, I get a line break between the two div rows, and a break below the last row. I've attempted adding margin:0 tags, and display: inline tags, but nothing seems to work. Here is a photo. The green lines are the issue, I'd like to remove them. (I color coded my wrapper div green to better visualize things)

Here is a photo:

http://farm3.static.flickr.com/2445/3598476751_9ca760e667.jpg?v=0

coloeagle
06-07-2009, 04:30 PM
Post your current code.

BrackAttack
06-07-2009, 05:06 PM
Below is the code that for some reason produces line breaks between the div boxes in browser preview. (I began with seed code that I got from you, coloeagle, (http://www.dreamweaverclub.com/forum/member.php?u=25985) on another post, so I might have messed it up somehow.

Also, if I can add one more inquiry to my code :wink:...I've noticed that <div id="ContentBox2down"> does not seem to be exactly flush with the other page elements on the right. I've checked to make sure the div boxes add up to the total width of the page, but it continues to appear to be a few px wider at the right side.



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test</title>
<style type="text/css">

* {margin:0; padding:0;

}
body {
background:#494E48;
text-align: center;

}
p {

}
#wrapper {
width:945px;
margin:0 auto;
border-right:5px solid;
background-color: #093;

}
#head {
width:100%;
height:365px;
text-align: center;
background-color: #600;
}
#content {
margin: 0 auto;
display:inline

}
#ContentBox1up {
margin: 0 auto;

}
#ContentBox2down {
margin: 0 auto;

}
#footer {
clear:both;
width:100%;
height:74px;
background-repeat: no-repeat;
background-image: url(images/footernew2_53.jpg);

}
#lowermenudiv {
font-family: Verdana, Geneva, sans-serif;
text-align: center;
padding-top: 30px;
margin: 0 auto;

}
#maincontentleft {
font-family: Verdana, Geneva, sans-serif;
float: left;
height: 200px;
width: 640px;
background-color: #03F;
margin: 0 auto;
}
#subsribeboxright {
font-family: Verdana, Geneva, sans-serif;
background-color: #CF9;
float: left;
height: 200px;
width: 305px;
margin: 0 auto;
}
#contentleftbottom {
font-family: Verdana, Geneva, sans-serif;
background-color: #60F;
height: 285px;
width: 320px;
float: left;
margin: 0 auto;
}
#contentmidbottom {
font-family: Verdana, Geneva, sans-serif;
background-color: #F0F;
height: 285px;
width: 320px;
float: left;
margin: 0 auto;
}
#contentrightbottom {
font-family: Verdana, Geneva, sans-serif;
background-color: #3CF;
float: right;
height: 285px;
width: 305px;
margin: 0 auto;
}
</style>
<script type="text/javascript">
<!--
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>

</head>
<body onload="MM_preloadImages('images/GilaTest2_36b.gif')">
<div id="wrapper">
<div id="head"></div>
<div id="content">
<div id="ContentBox1up">
<div id="maincontentleft">Content for id "maincontentleft" Goes Herej</div>
<div id="subsribeboxright">Content for id "subsribeboxright" Goes Here</div>
<p>&nbsp;</p>
</div>

<div id="ContentBox2down">

<div id="contentleftbottom">Content for id "contentleftbottom" Goes He asd rea</div>
<div id="contentmidbottom">Content for id "contentmidbottom" Goes He asd rea</div>
<div id="contentrightbottom">Content for id "contentrightbottom" Goes He asd rea</div>

<p>&nbsp;</p>
</div>

</div>

<div id="footer">
<div id="lowermenudiv"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image1','','images/GilaTest2_36b.gif',1)"><img src="images/GilaTest2_36.gif" name="Image1" width="70" height="11" border="0" id="Image1" /></a></div>
</div>

</div>

</body>
</html>



Thank you.

coloeagle
06-08-2009, 05:20 AM
Remove the two empty paragraph tags you have

BrackAttack
06-09-2009, 04:49 PM
Ug, that was it! I was hoping it would be something less...less amateur. Sorry, Thank you.

What about:
Does anyone happen to see how the lower content row (the three div boxes) seems to display a few pixels wider than the rest of the page? The three div boxes add up to 945px, the same as the wrapper, content above, and footer.

:confused:

coloeagle
06-10-2009, 02:00 AM
What about:
Does anyone happen to see how the lower content row (the three div boxes) seems to display a few pixels wider than the rest of the page? The three div boxes add up to 945px, the same as the wrapper, content above, and footer.

:confused:
Not seeing this, what browser are you seeing it in?

Lelmmossy
06-10-2009, 10:57 PM
Can anyone help me out with a little problem im having with dreamweaver, im coding a web layout which i have done alot but i cant seem to remember this. On my layout i have my header, navigation under the header and 2 boxes on the left side and main content box on the right. When it comes to expanding the left box, the main content box on the right will expand with it therfore moving my text down. How can i make it so when i expand the box on the left it wont move any text of the main content box that i have on the right side?

domedia
06-10-2009, 11:01 PM
Please don't hijack this thread.
Read the link in my signature and make a new thread if a forum search does not provide any help 8)
Can anyone help me out with a little problem im having with dreamweaver, im coding a web layout which i have done alot but i cant seem to remember this. On my layout i have my header, navigation under the header and 2 boxes on the left side and main content box on the right. When it comes to expanding the left box, the main content box on the right will expand with it therfore moving my text down. How can i make it so when i expand the box on the left it wont move any text of the main content box that i have on the right side?

BrackAttack
06-12-2009, 08:50 PM
Not seeing this, what browser are you seeing it in?

Okay, yes, it does not seem to appear in any of the browsers, so at the end of the day it is not a big deal.

The Div with a few extra pixels is only showing up in Dreamweaver CS4 design view. Very strange. Anyway, here are two pics of the issue if anyone is curious.

(look at the right side of the Div, it is wider than the above and below div box by a few px)
http://www.flickr.com/photos/28058008@N05/3620561408/

(here is a zoomed view of the upper right corner)
http://www.flickr.com/photos/28058008@N05/3619742047/