Dynadot โ€” .com Registration $8.99

Little bit of css help needed

Spaceship Spaceship
Watch
edmarriner

edmarriner

Established Member
โ˜… 20 โ˜…
Impact
4
Hey,

I need a bit of css help. Ive got a basic layout for my new website but i cant seem to get the white box which everything is held in to fully strech arounf everything.

Its working in IE but not in firefox or opera.

heres the 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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
<!--
body {
background-color: #6990D3;
background-image: url(images/bg.jpg);
background-repeat: repeat-x;
}
#wrap {
background-color:#fff;
width: 550px;
margin-right: auto;
margin-left: auto;
margin-top: 50px;
padding: 0px;
position: relative;
}
#topbar {
background-color:#0066CC;
border-bottom-width: 1px;
border-bottom-style: solid;
border-top-width: 0px;
border-right-width: 0px;
border-left-width: 0px;
border-bottom-color: #003399;
clear: both;
}
#banner {
background-color:#0066CC;
height: 50px;
margin: 7px;
}
#nav {
background-color:#0066CC;
height: 20px;
margin-top: 7px;
margin-right: 7px;
margin-left: 7px;
text-align: center;
word-spacing: 35px;
}
#welcome {
background-color:#0066CC;
width: 175px;
float: left;
height: 200px;
margin-top: 7px;
margin-left: 7px;
}
#content {
background-color:#0066CC;
float: right;
width: 353px;
height: 250px;
margin: 7px;
}
#blog {
background-color:#0066CC;
float: left;
width: 175px;
height: 43px;
text-align: center;
font-size: 24px;
margin-bottom: 7px;
margin-left: 7px;
margin-top: 7px;
}
#left {
float: left;
}
#right {
float: right;
}
-->
</style>
</head>

<body>
<div id="wrap">
<div id="topbar">Blog RSS Sitemap</div>

<div id="banner">banner</div>
<div id="nav">Home Blog Articals Portfolio Services Contact </div>
<div id="welcome">welcome</div>
<div id="content">content</div>
<div id="blog">blog!</div>
</div>
</body>
</html>
Click to expand...

any ideas?

cheers,
-ed
 
Reply
0
0 Like
0 Thanks
•••
The views expressed on this page by users and staff are their own, not those of NamePros.
AfternicAfternic
Sort by date Sort by points
try adding
Code: 
clear:both;
to #wrap
it sometimes works, but not always
 
Reply
0
0 Like
0 Thanks
•••
The problem is being caused by your use of floats. The container stretches to fit the banner and nav because they are not floated.

One easy fix would be to a add empty <div> layer after the 'blog' layer and give it these properties: clear:both; height: 0px; overflow: hidden;

If you don't want to add the extra clearing div, you could give this method a try as well.
 
Reply
1
1 Like
0 Thanks
•••
hi

#content {
background-color:#0066CC;
float: right;
width: 353px;
height: 250px;
margin: 7px;
padding: 0 2px;
}


try it !!
 
Reply
0
0 Like
0 Thanks
•••
Log in or sign up to reply here.

  1. steamdrums.com

    • Make Offer

  2. DataStripe.com

    • Show Price

  3. ChinaVertiport.com

    • Make Offer

  4. RoleCoin.com

    • Show Price

  5. Peso.digital

    • Show Price

  6. omniversenews.com

    • Make Offer

  7. MixedSnack.com

    • Make Offer

  8. Dcep.in

    • Buy Now
    • $8,888

  9. visualuml.com

    • Make Offer

  10. VCoin.co.uk

    • Show Price

Similar threads

D
Various CSS problems
1 reply
1K views
LeetPCUser
LeetPCUser
T
My CSS must be terrible... DIV not displaying at all in FF3, works fine in IE8
4 replies
917 views
shockie
shockie
abcde
[Resolved] Please help with <div>
1 reply
1K views
abcde
abcde
Michael
I need some quick HTML/CSS help.
3 replies
897 views
Barrucadu
Barrucadu
P
Any one can help me fix this css coding please?
5 replies
1K views
Nodws
Nodws

We're social

Escrow.com

New posts โž”

Spaceship

Auction activity โž”

Unstoppable Domains

How do you think a potential buyer first checks if your domain is for sale?

Polls of interest โž”

CryptoExchange.com

Hot this week โž”

Domain Recover

Community favorite โž”

Hot this month โž”

DomainEasy โ€” Payment Flexibility

Blog favorites

DomDB

  1. steamdrums.com

    • Make Offer

  2. DataStripe.com

    • Show Price

  3. ChinaVertiport.com

    • Make Offer

  4. RoleCoin.com

    • Show Price

  5. Peso.digital

    • Show Price

  6. omniversenews.com

    • Make Offer

  7. MixedSnack.com

    • Make Offer

  8. Dcep.in

    • Buy Now
    • $8,888

  9. visualuml.com

    • Make Offer

  10. VCoin.co.uk

    • Show Price
  • The sidebar remains visible by scrolling at a speed relative to the pageโ€™s height.
Back