Stupid noob question about layout [Archive]

Click to See Complete Forum and Search --> : Stupid noob question about layout

rutledj

11-27-2006, 09:30 AM

I have the following on a page and my question is why don't the div's (ad and mission) appear in the page side-by-side instead of ad on top, mission on bottom? There is enough room on the page for them to be side-by-side.

I added colors to the borders and it appears that each div occupies the entire horizontal width even though the actual content is about 1/3 the width of the page.

I guess I assumed that one div would follow the next if no positioning was indicated in the style sheet.

Thanks,
Rut

<head runat="server">
<link href="boxstyle.css" rel="stylesheet" type="text/css" />
<title>Untitled Page</title>
</head>
<body>

<form id="form1" runat="server">
<div id="wapper">
<div id="ad">
<img src="climbingwall.JPG" />
</div>
<div id="mission">
<h2>Welcome</h2>
Reidsville Christian Church exists to share <br />
the good news of Jesus with people everywhere,<br />
to teach and strengthen the believers, to<br />
minister to the needs of others, and to be<br />
a Christian influence in the community.
</div>

</div>
</form>
</body>

Style sheet:

body {
}

* {
margin:0;
padding:0;
}

#ad
{
border-right: fuchsia thick solid;
border-top: fuchsia thick solid;
border-left: fuchsia thick solid;
border-bottom: fuchsia thick solid;
}

#wapper
{
border-left-color: blue;
border-bottom-color: blue;
border-top-style: dotted;
border-top-color: blue;
border-right-style: dotted;
border-left-style: dotted;
border-right-color: blue;
border-bottom-style: dotted;
}

#mission
{
border-right: red dashed;
border-top: red dashed;
border-left: red dashed;
border-bottom: red dashed;
}

gil davis

11-27-2006, 09:55 AM

A DIV is a block element, and standard rendering causes a linefeed after a block element, causing a DIV to appear beneath its preceeding element rather than adjacent to it.

rutledj

11-27-2006, 09:57 AM

So is there a way to get them to appear side-by-side?

Rut

rutledj

11-27-2006, 10:01 AM

I tried floating the ad div to the left, the mission div to the right and they now align side-by-side but...

the wrapper div's borders are above the other two divs with no height. How can this be if the ad and mission are inside the wrapper div?

confused,
rut

WebJoel

11-27-2006, 10:21 AM

This seems to work.
<!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" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title></title>
<style type="text/css">
html, body {border:0; padding:0; margin:0;}
body {
}

* {
margin:0;
padding:0;
}

#ad
{
width:50%; float:left;
border:4px fuchsia solid;
}

#wrapper
{border:4px dotted blue;
}

#mission
{width:50%;
height:100px;
clear:left; float:right;
border: 4px red dashed;
}

</style>
<script type="text/javascript">
</script>
<head runat="server">
<link href="boxstyle.css" rel="stylesheet" type="text/css" />
<title>Untitled Page</title>
</head>
<body>

<form id="form1" runat="server">
<div id="wrapper">
<div id="ad">
<img src="climbingwall.JPG" />
</div>
<div id="mission">
<h2>Welcome</h2>
Reidsville Christian Church exists to share <br />
the good news of Jesus with people everywhere,<br />
to teach and strengthen the believers, to<br />
minister to the needs of others, and to be<br />
a Christian influence in the community.
</div>
<div style="clear:all; width:100%;"></div>

</div>
</form>
</body>

</html>

David Harrison

11-27-2006, 10:22 AM

That's just the way it is with floats. It's all in the CSS spec:Since a float is not in the flow, non-positioned block boxes created before and after the float box flow vertically as if the float didn't exist.A way to get around that is to add in another <div> element, after the floated blocks, but before the end of the containing element, then on that <div> element setting clear:both;. Like so:<div id="wapper">

<div id="ad">
...
</div>

<div id="mission">
...
</div>

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

</div>That means that no floated elements can be next to it, on either side, so it is placed at the bottom of the floats, and because it is inside the wrapper it effectively pulls the bottom of it down below it.

Edit: WebJoel, the clear property does not have the value "all", the reason what you posted works is because of the 100% width which leaves no space for floats at the side.

ray326

11-27-2006, 10:22 AM

Floated elements are taken out of the document flow so they no longer "push" the containing div. You have to "clear the floats." Before you close the wrapper insert this.

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

David Harrison

11-27-2006, 10:25 AM

Heh, don't you hate it when you're waiting for a bus, then three come all at once. ;)

rutledj

11-27-2006, 10:50 AM

Thanks for the info.

Rut