Stuck with moving a div over

Forum Moderators: not2easy

Message Too Old, No Replies

Stuck with moving a div over

MsCrow

6:44 pm on May 21, 2008 (gmt 0)

Hello

I am working on <> and am having trouble with the bottom footer div. I think it would look better with it just sitting under the main content div and not extending under the menu. Everytime I tinker with the CSS I get it to move over but it doesn't take on the same width as the main div, just creates a horizontal scroll.

Please, can anyone help?

Ellie

[edited by: SuzyUK at 2:59 am (utc) on May 26, 2008]
[edit reason] Please No URI's, see guidelines at top of forum [/edit]

MsCrow

6:49 pm on May 21, 2008 (gmt 0)

Oh and the other annoyance. What do I need to do to stop the menu disappearing down when viewed in IE?

bubble

11:57 am on May 22, 2008 (gmt 0)

I think you should put footer div inside content div, set the width to fit into content div's width.

MsCrow

7:49 pm on May 25, 2008 (gmt 0)

I've just realised that, it needs to be inside the container. Problem is, it's a liquid layout so how do I define it? The content has no definition aside from being 180px over to the right to miss the menu.

MsCrow

11:15 am on May 30, 2008 (gmt 0)

Still stuck. I've sorted the footer issue, now in some browsers the footer extends over a little into the gap. In 800x600, the menu and extra div still drop down. The code is:

/* CSS Document */

html,body{
margin:0;
padding:0;
background-color: #DDE1E0; }

body{
font-size: 0.8em;
margin-left: 5%; margin-right: 5%; margin-top: 1%; }

h1,h2,h3 {
font-family: "Arial Rounded MT Bold", "Eras Bold ITC", Arial, sans-serif;
color: #003333;
margin: 10px 10px 10px;
line-height: 120%;}

p{
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #003333;
margin: 10px 10px 10px;
line-height: 120%;}

.highlight {
color: 000033;
background-color: #FFCC00; }

a{
display: compact;
color: #981793; }

ul li {
color: #003333;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 1em;
list-style-type: disc;
line-height: inherit;
text-align: left;
padding-right: 3px; }

div#header h1{
margin: 10px 0;
padding-left: 10px;
color: #295245;
height: 85px;}

div#content h1
{line-height: 1;}

div#header {
background-color: #669999;
background-image:url(.././images/dataturq.jpg);
background-position:top right;
background-repeat:no-repeat; }

div#footer
{background-color: #669999; color: #FFF;
background-image:url(.././images/datafootturq.jpg);
background-position:bottom right;
background-repeat:no-repeat;
width: 80%;
float: right;}

div#footer p
{margin:0; padding-left: 10px; padding-right: 10px; padding-top: 10px; height: 48px;}

div#wrapper{
width: 100%; }

div#content{
width: 75%;
background-color: #9CCFC0;
margin-top: 5px;
margin-bottom: 5px;
padding-right: 40px;
background-image:url(.././images/sidestripindex.jpg);
background-position:top right;
background-repeat: repeat-y;
float: right;}

div#navigation{
float: left;
width: 18%; }

div#extra{
float: left;
clear: left;
width: 18%;
margin-top: 5px;
margin-bottom: 5px;
background-color: #9CCFC0;}

ul.postnav,ul.postnav li{margin:3px 0;padding:0;list-style-type:none}
ul.postnav li{float:left;width: 100%;font-size:1.2em;margin-right: 5px}
ul.postnav a{display:block;width:100%;padding:5px 0;font: bold 100% Verdana,Arial,sans-serif;
background: #48B7B7;color: #295245;
text-decoration:none;text-align:center}
ul.postnav a:hover{background: #66ffff;color:#295245}

ul.postnavlil,ul.postnavlil li{margin:5px 0;padding:0;list-style-type:none}
ul.postnavlil li{float:left;width: 100%;font-size:1em;margin-right: 5px}
ul.postnavlil a{display:block;width: 100%;padding:5px 0;font: bold 100% Verdana,Arial,sans-serif;
background: #59E1E1;color: #295245;
text-decoration:none;text-align:center}

ul.postnavlil a:hover{background: #66ffff;color:#295245}

The html code is:
<div id="wrapper">
<div id="header"><h1>Title <br /> more title </h1></div>
<div id="content">
<h2>Title</h2>
<p>favourite foo text</p>
</div>
<div id="navigation">
<ul class="postnav"><li id="home"><a href="#">Home</a></li></ul>
<ul class="postnavlil"><li id="story"><a href="#" title="#">The Story</a></li></ul>
</div>
<div id="extra">
<p><strong>Extra Div</strong></p>
<p>You are in the homepage... foo foo </p>
</div>
<div id="footer"><p>© 2008<br />footer text</p></div>
</div>

[edited by: SuzyUK at 2:11 pm (utc) on May 30, 2008]
[edit reason] shortened HTML [/edit]

genevevex

1:09 pm on May 30, 2008 (gmt 0)

Woah! Way too much. We didn't need all the contents.

Anyway, here's some code I use for one of my sites, modified slightly.

#container {
position: relative;
display: block;
background: #FFFFFF; /* background color of the middle */
border-left: 200px solid #55834D; /* background of left */
overflow: visible;
padding: 0px;
margin: 0px;
}

#navigation {
float: left;
position: relative;
width: 200px;
margin-left: -200px;
display: inline;
}

#contents {
padding: 0px;
margin: 0px;
}

#foot {
display: block;
height: 55px;
padding: 0px;
margin: 0px;
}

.footpad {
padding: 10px 20px 0px 20px;
float: left;
}

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<head>


</head>

<div id="navigation">
Navigation/left side contents here
</div>

<div id="contents">
Main section contents here
</div>

</div>

<div class="footpad"> 
Footer contents
</div>

</div>

</body>

The only problem I have with this is that the footer is decided by where all of the contents and left-side navigation ends. So if you have very little content and a short navigation menu, then the footer will be halfway up the page; where-ever that section is over.

However, that could probably be solved by simply adding in some extra spacing at the end of the contents area, or under the navigation menu, so that it's always there.

MsCrow

1:40 pm on May 30, 2008 (gmt 0)

Thanks for the response, if I use a similar css, will it solve the problems I mentioned? What is causing it? Sorry about the code, didn't know what to paste since I can't just add the link.

[edited by: MsCrow at 1:47 pm (utc) on May 30, 2008]

genevevex

1:42 pm on May 30, 2008 (gmt 0)

If you use something similar, I don't see why it wouldn't work. I haven't had any cut-off problems with this particular layout.

MsCrow

1:48 pm on May 30, 2008 (gmt 0)

What do you mean by a cut off? The problems I'm having is the menu and extra div floating down and the footer creeping over.

SuzyUK

2:18 pm on May 30, 2008 (gmt 0)

MsCrow, hi.. I've shorthened and simplified your HTML

your footer is "creeping over" becasue it's wider than the content div, your content div = 75% + 40px right padding so you should make the footer div the same in order to make it match (80% is not necessarily the same as 75%+40px)

the floats dropping will happen when the window isn't wide enough to have the content of both sides, side by side you can make an allowance for that by putting a min-width on the container say around 800px.. IE and below don't support min-width but there are workarounds out there. If you require one ~ try search for IE Min-Width hack

[edited by: SuzyUK at 2:18 pm (utc) on May 30, 2008]

MsCrow

2:25 pm on May 30, 2008 (gmt 0)

Thank you for replying, I'm taking a look! What you said makes sense, I had forgotten about the 40px for the image.

MsCrow

7:21 pm on May 30, 2008 (gmt 0)

This has really helped a lot, thank you. Unfortunately, I'm still getting the div floatingdown on Mac with explorer 5.2 and explorer 6 on windows, I always had the IE6 problem and suspect it needs an additional hack. The current css reads:

div#wrapper{
width: 99%;
min-width: 700px;
width:expression(document.body.clientWidth < 765? "700px" : (document.body.clientWidth > 1300? "1280px": "99%" ) ); }

div#navigation{
float: left;
width: 19%; }

div#extra{
float: left;
clear: left;
width: 19%;
margin-top: 5px;
margin-bottom: 5px;
background-color: #9CCFC0;}

swa66

9:43 pm on May 30, 2008 (gmt 0)

IE on mac is dead and buried for all I'm concerned (I'm typing this on a mac). MSFT stopped distributing it long ago and even recommended for a while that people use Safari instead. Those pages are now 404s, guess corporate marketing didn't like it.

Hacks: for IE6: please don't. Use conditional comments instead (and move things like that expression in it).

The drop down: I'd bet it's the broken box model causing it. Try narrowing the width of the floated elements.

MsCrow

3:55 pm on May 31, 2008 (gmt 0)

Hmm, I've tried narrowing the widths hence 75% and 19% to ensure they don't drop down, this works for everything except IE6 so still stuck on that one.

SuzyUK

5:16 pm on May 31, 2008 (gmt 0)

IE's buggy, float/clearance thing I think..

it's something to do with the list items in the left sidebar
adding clear:left; to the nav ul's fixed it for me..

div#navigation{
float: left;
clear: left;
width: 19%;
}

also I don't see that you need those right margins on your li elements they could be doing something too.. the min width you have only allows a margin of error of 1px (gap between the columns) so those 5 are too much, if you want a bigger gap you will likely need to change the width of one of your columns down by and percent or 2

e.g. @ 700px width

wrapper = 700 x 99% = 693px
left = 693 x 19% = 132px
right = (693 x 75%)+40px = 560px
both columns = 692px in a 693px wrapper = 1px gap

-Suzy

MsCrow

5:56 pm on May 31, 2008 (gmt 0)

Sarah, thank you, thank you, thank you for your help. Your advice was easy to understand and SO helpful. I have adjusted the clear issue and margin right issues and just browsercammed it, it's all working! I've taken on board your minimum height advice and will keep it back as a just in case. I don't want a larger gap as there is already, but once I've finished the site I may need to use it.

Thanks again. So appreciative.

Ellie