Jump to content

get rid of float gap (margin)

jwk811

By jwk811
in CSS Help

Recommended Posts

jwk811 Advanced Member

jwk811

Posted
Posted

i have a 10px margin on the right when i put a left float and right float next to eachother. i tried putting 0 for padding and margin. all the sizes are fine. the content div has a 10px margin that wont go away. i tried negative px.

 

then i went to make another with left and right float side by side and it made another margin so its looking like a mess. plz help. heres my only file

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style type="text/css" media="screen">
body {
  text-align: center;
  margin: auto;
}

/* Heading */
#heading {
  text-align: center;
  width: 800px;

}
#heading-top {
  width: 800px;
  height: 10px;
  background: green;

}
#heading-left {
  float: left;
  width: 205px;
  height: 140px;
  background: orange;

}
#heading-right {
  float: right;
  width: 595px;
  height: 140px;
  background: brown;

}
#menu {
  width: 800px;
  height: 40px;
  background: blue;
}

#container {
  width: 800px;  
  text-align: left;
  margin:0px;
  padding:0px;
}
  
#content {
  margin:0px;
  padding:0px;
  float: left;
  padding: 0px 10px 0px 0px;
  width: 600px;
  background: #151515 url(images/bg1.png) repeat-x left top;
}

#side {
  float: right;
  padding: 0px 10px 0px 10px;
  width: 160px;
  height: 600px;
  background: #BCAA7A;
}

#top-left {
  float: left;
  padding: 0px 10px 0px 0px;
  width: 360px;
  height: 300px;
}

#top-right {
  float: right;
  padding: 0px 10px 0px 10px;
  width: 220px;
  height: 300px;
  background: #4a0001;
}

#bottom-left {
  float: left;
  padding: 0px 10px 0px 0px;
  width: 220px;
  height: 300px;
  background: #8A1A18;
}

#bottom-right {
  float: right;
  padding: 0px 10px 0px 10px;
  width: 360px;
  height: 300px;
}

#featured {
  float:right;
  width:100px
  height:100px;
  border-style: solid;
  border-color:white;
  border-width:1px
}

#footer {
  padding-top: 20px;
  text-align: center;
  clear: both;
  width: 800px;
  background: brown;
}

</style>
<title>My Content</title>
</head>
<body>

<div id="heading">
  <div id="heading-top"></div>
  <div id="heading-left"></div>
  <div id="heading-right"></div>
  <div id="menu"></div>
</div>

<div id="container">

<div id="content">
  <div id="top-left"><br><br></div>
  <div id="top-right"><br><br></div>
  <div id="bottom-left"><br><br></div>
  <div id="bottom-right">
<div id="featured"><img src="" width="250" height="250"></div><br><br>
  </div>
</div>

<div id="side"><br><br><br><br>
</div>

</div>

<div id="footer">
</div>

</body>
</html>

Link to comment
https://forums.phpfreaks.com/topic/193272-get-rid-of-float-gap-margin/
Share on other sites
haku Regular Member

haku

Posted
Posted

I'm going to guess you mean IE6, but really, all three of the main IEs (6, 7 and 8) behave differently, so you should really specify which you are referring to when asking for help.

 

Anyways, add:

 

display:inline-block;

 

to the floated element and see if that helps.

Archived

This topic is now archived and is closed to further replies.

Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.