...

View Full Version : Div positioning



reapercharlie
11-17-2008, 10:19 PM
I'm a div positioning noob. This is my first ever attempt at a table-less layout.

So far I have this:

[link removed]

which looks fine in Firefox, but with IE the copright div scrunches up into the space underneath the left navigation. Why?

Also, if you happen to be looking through my CSS and find other mistakes or bad habits that I'm forming... please slap me on the wrist, post haste!

Thanks very much!

webguy08
11-18-2008, 12:55 AM
Well this is difficult to answer since you haven't posted the CSS code. However, try putting in the code for the Copyright section:
clear: both;
If that does not work, try experimenting with the 'float' of the box.
eg.
float: left;
or
float: right;

If this doesn't work then post the CSS code.

reapercharlie
11-18-2008, 02:37 AM
Well this is difficult to answer since you haven't posted the CSS code. However, try putting in the code for the Copyright section:
clear: both;


This seems to work great! Thank you!

Does clear:both; take the floats (left or right) and cancel them and create a "return" to the next line, in a manner of speaking? I'm sure I'm missing something still, and I'd like to know HOW IT WORKS too.. let me know if I'm close.

Thanks again!

jlhaslip
11-18-2008, 04:53 AM
Clear: both says to look at the previous elements of the page and start below the closest one. (sort of what you said)

reapercharlie
11-18-2008, 10:44 AM
Ah crap, I think it's still screwed up. I thought it had before because I viewed it in Firefox, but the problem was with IE.

here is the URL again... I'm trying to get the #copyright to appear below the #main_content using Internet Explorer:

[link removed]

the css is here:

body {font-size:10pt;font-family:verdana;color:#258;margin:0;padding:0;border:0;background:#fff;background-image:url('images/faire-.jpg');background-repeat:repeat-x;background-position:top left;}
table, tr, td, div {margin:0;padding:0;border:0;}
a {color:#47a;text-decoration:none;}
a:hover {text-decoration:underline;}
#title_elements {margin:23px 0 0 0;}
#title_elements div {float:left;}
#title_elements div .title {width:247px;background-image:url('images/title.png');}
#title_elements a {background-image:url('images/links.png');margin:0 23px;height:43px;background-repeat:no-repeat;display:block;text-indent:-999px;overflow:auto;}
.link1_up {width:111px;background-position:top left;}
.link1_over {width:111px;background-position:bottom left;}
.link2_up {width:165px;background-position:-111px 0;}
.link2_over {width:165px;background-position:-111px -43px;}
.link3_up {width:212px;background-position:top right;}
.link3_over {width:212px;background-position:bottom right;}
#body_wrapper {position:absolute;top:100px;left:23px;width:900px;}
#left_nav {float:left;width:130px;}
#left_nav p {text-align:justify;text-indent:1em;}
#left_nav a {font-size:1.3em;font-weight:bold;display:block;}
#main_content {float:right;width:750px;margin-top:-17px;#margin-top:0;}
#main_content p {text-align:justify;text-indent:2em;}
#main_content p.header {font-size:1.3em;font-weight:bold;color:#47a;text-indent:0;}
#copyright {clear:both;float:left;margin:43px 0;}
#faithful {font-weight:bold;}

I added the clear:both; to #copyright, but it doesn't seem to accomplish anything (I thought it had before because I viewed it in Firefox, when the problem is in IE). When I remove the float:left; in #copyright, it appears in the correct position under #main_content in FF/IE, but the 43px top/bottom margin gets pwned somehow in FF. Is using clear:both; in conjunction with a float considered improper css? Or is it acceptable and just producing undesired results? I just want the copyright at the bottom!! :)

As I said... if you find any woefully incompetent styling or page structure, please feel free to let me know so, I can break bad habits before they form.

FWDrew
11-18-2008, 10:50 AM
I am in sort of a hurry, so didnt have the time to look way into this, my apologies. But the problem might be the two css errors.

Looks like you might have just misplaced a semi colon or two in your css. Hope that is of some help.

Best Wishes,

Drew

effpeetee
11-18-2008, 11:47 AM
Assembled code.


<!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">
<head>
<base href="http://www.example.com/" />

<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<meta name="keywords" content="" />
<meta name="description" content="example.com" />
<link rel="stylesheet" href="style.css" type="text/css" />
<title>Example</title>
<style type="text/css">body {
font-size: 10pt;
font-family: verdana;
color: #258;
margin: 0;
padding: 0;
border: 0;
background: #fff;
background-image: url('images/faire-.jpg');
background-repeat: repeat-x;
background-position: top left;
}

table, tr, td, div {
margin: 0;
padding: 0;
border: 0;
}

a {
color: #47a;
text-decoration: none;
}

a:hover {
text-decoration: underline;
}

#title_elements {
margin: 23px 0 0 0;
}

#title_elements div {
float: left;
}

#title_elements div .title {
width: 247px;
background-image: url('images/title.png');
}

#title_elements a {
background-image: url('images/links.png');
margin: 0 23px;
height: 43px;
background-repeat: no-repeat;
display: block;
text-indent: -999px;
overflow: auto;
}

.link1_up {
width: 111px;
background-position: top left;
}

.link1_over {
width: 111px;
background-position: bottom left;
}

.link2_up {
width: 165px;
background-position: -111px 0;
}

.link2_over {
width: 165px;
background-position: -111px -43px;
}

.link3_up {
width: 212px;
background-position: top right;
}

.link3_over {
width: 212px;
background-position: bottom right;
}

#body_wrapper {
position: absolute;
top: 100px;
left: 23px;
width: 900px;
}

#left_nav {
float: left;
width: 130px;
}

#left_nav p {
text-align: justify;
text-indent: 1em;
}

#left_nav a {
font-size: 1.3em;
font-weight: bold;
display: block;
}

#main_content {
float: right;
width: 750px;
margin-top: -17px;
margin-top: 0;
}

#main_content p {
text-align: justify;
text-indent: 2em;
}

#main_content p.header {
font-size: 1.3em;
font-weight: bold;
color: #47a;
text-indent: 0;
}

#copyright {
clear: both;
float: left;
margin: 43px 0;
}

#faithful {
font-weight: bold;
}
</style>
</head>
<body>
<div id="title_elements">
<div><a class="title" href="http://www.example.com">example.com home</a></div>
<div><a class="link1_up" onmouseover="this.className='link1_over'" onmouseout="this.className='link1_up'" href="the-band">the band</a></div>
<div><a class="link2_up" onmouseover="this.className='link2_over'" onmouseout="this.className='link2_up'" href="toddler-tunes">toddler tunes</a></div>
<div><a class="link3_up" onmouseover="this.className='link3_over'" onmouseout="this.className='link3_up'" href="commercial-work">commercial work</a></div>
</div>
<div id="body_wrapper">
<div id="left_nav">

<a href="index.htm">News</a>
<a href="about.htm">About</a>
<a href="pictures.htm">Pictures</a>
<a href="media.htm">Media</a>

</div><!--left_nav-->
<div id="main_content">
<div>
<p class="header">Main Content</p>
<p>

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd guber gren, no sea takimata sanctus est. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd guber gren, no sea takimata sanctus est. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.

</p><p>

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd guber gren, no sea takimata sanctus est. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est.

</p><p>

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

</p>
</div>
</div><!--main_content-->
<div id="copyright">
Copyright &copy; <b>Example</b> and <b>Example’s Tunes</b>. All rights reserved. Designed and developed by <a id="faithful" href="http://www.example.com">Example</a>.
</div>
</div><!--body_wrapper-->
</body>
</html>


This seems a bit odd.


#main_content {
float: right;
width: 750px;
margin-top: -17px;
margin-top: 0; } - margin-top twice??

I've put it here. (http://www.exitfegs.co.uk/dhello.html)


Frank

I've put it here. (http://www.exitfegs.co.uk/dhello.html)

reapercharlie
11-18-2008, 07:23 PM
Edit: I see that as you've uploaded it to exitfegs that it puts the CSS in the HTML document and doesn't show the actual CSS that I've written for that item. So to understand what I've written below, here is the original CSS for #main_content, in its entirety.


#main_content {
float: right;
width: 750px;
margin-top: -17px;
#margin-top: 0;
}

The #margin-top apparently is supposedly only read by one browser out of FF/IE (I'm not sure which, and I was told that I could use that CSS hack to get the right affect in a cross-browser situation, even though the CSS would not validate) so I think margin-top is read by both browsers, and #margin-top is read by only one, overwriting the original value and making it therefore look correct.

I'm sure this is somehow very wrong.. whats a better way to do it? I'm aware that CSS hacks are terrible semantically... but I don't know any way around IE's box model problems other than that.

effpeetee
11-18-2008, 08:47 PM
put your new code (http://www.exitfegs.co.uk/dhello.html)in.

Frank

reapercharlie
11-26-2008, 04:21 AM
put your new code (http://www.exitfegs.co.uk/dhello.html) in.

Frank
what do you mean?

jhaycutexp
11-26-2008, 01:27 PM
okay i think here's your problem


#left_nav {float:left;width:130px;}
#main_content {float:right;width:750px;margin-top:-17px;#margin-top:0;}
#copyright {clear:both;float:left;margin:43px 0;}


you'll notice that you are floating your divs right? just think of your divs as blocks that occupies a certain free space..

in your case, your leftnav floats to the left and then your content floated to the right, eventually the copyright which was floated to the left, found a space so it jumps right to it and then occupied it..

so here's the correct way of using the clear: style..



#left_nav {float:left;width:130px;}
#main_content {float:left;width:750px;margin-top:-17px;#margin-top:0;}
#copyright {float:left;}
.clear {clear:both;}





<div id ="wrap">
<div id ="left_nav"></div>
<div id ="content"></div>
<div class ="clear"></div>
<div id ="copyright"></div>
</div>


just adjust whatever you want to do with it.. hope it helps..



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum