CSS annoying white space problem
Moderator: General Moderators
CSS annoying white space problem
Okay, i have fairly simple layout, it can be seen here.
As you can see all the boxes butt up to each other nicely as they should.
Now, when i put the text in the green box inside <p> tags, the layout suddenly looks like this. As you can see, the blue and green box have moved down slightly leaving a gap between the green and red boxes.
I can't for the life of me figure out why.
Anyone got any ideas where i am going wrong, and what i can do to rectify the problem!
Thanks
As you can see all the boxes butt up to each other nicely as they should.
Now, when i put the text in the green box inside <p> tags, the layout suddenly looks like this. As you can see, the blue and green box have moved down slightly leaving a gap between the green and red boxes.
I can't for the life of me figure out why.
Anyone got any ideas where i am going wrong, and what i can do to rectify the problem!
Thanks
Very interesting problem you have got there..
will fix it.
This will also fix it, adding a gutter. The p is expanding the box model.
Code: Select all
p {
margin: 0px;
}
This will also fix it, adding a gutter. The p is expanding the box model.
Code: Select all
<!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 { margin: 0; }
div.gutter {
padding: 10px;
}
#outerContainer { width: 100%; }
#header { width: 100%; height: 160px; }
#headerLogo { width: 219px; float: left; height: 160px; }
#headerOptions { margin-left: 219px; background-color: #FF0000; height: 160px; }
#content { width: 100%; }
#mainMenu { width: 219px; float:left; background-color:#123456; }
#mainContent { margin-left: 219px; background-color:#00CC00; }
-->
</style></head>
<body>
<div id="outerContainer">
<div id="header">
<div id="headerLogo">asdas</div>
<div id="headerOptions">hello</div>
</div>
<div id="content">
<div id="mainMenu">
<p>s </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</div>
<div id="mainContent">
<div class="gutter">
<p>hfgh</p>
<p> </p>
<p> </p>
<p> </p>
</div>
</div>
</div>
</div>
</body>
</html>
You may find this css usefull
http://developer.yahoo.com/yui/reset/
http://developer.yahoo.com/yui/reset/
Another trick is to start your css with * {margin:0;padding:0;} which resets everything. But that method has some drawbacks as well (http://kurafire.net/log/archive/2005/07 ... -revisited)
Gaps appearing suddenly or in one browser and not the other can also be caused by the different way margin-collapsing is handled by browsers.
Gaps appearing suddenly or in one browser and not the other can also be caused by the different way margin-collapsing is handled by browsers.
- daedalus__
- DevNet Resident
- Posts: 1925
- Joined: Thu Feb 09, 2006 4:52 pm
All block (perhaps i mean block-level) elements have that margin.
You can remove the margin by saying
You could also make it display inline, like a span tag.
You can remove the margin by saying
Code: Select all
blah
{
margin: 0;
}
Code: Select all
blah
{
display: inline;
}
Not all block level elements. For example, divs don't have any margin or padding by default.All block (perhaps i mean block-level) elements have that margin
The thing is, the so-called defaults you see when you don't supply any rules yourselve are just the default css rules of each browser. So if you take a basic html document, the browser has it's own stylesheet to give the common elements some styling.