CSS - Why Do Margin And Padding Widths Act Differently When Applied To A Floated Item?

I've never run into this before, but I have the following document structure and the right div's top margin is about 10px below the left in FF and Opera.(aligns fine in IE-AMAZING, but true) Every other time I have simply set the margin and padding both to 0px of my floated divs and it has brought it to the same height as my left div:

NOTE: I apologize, I don't have a link, this is being developed off line right now.

CSS code:

Code:

/* You guessed it, my container div */
div.container {
    clear: both; /* clears two divs above it */
    text-align: right;
    width: 100%;
}

/* Left div */

div.left {
    margin: 0px;
    padding: 0px;
    width: 49%;
}

/* Right div */

div.right {
    float: right;
    margin: 0px;
    padding: 0px;
    width: 49%;
}

xhtml markup:

Code:

<div class="container">

	    <fieldset class="info">

		<legend>Get Information For Your Next Trip Here!</legend>	

		    <p>
			Before you venture out on your next road trip, get your directions here.
		    </p>

		    <form action="myform.php" method="get">

			<div class="right">

			    <ul class="none">

				<li><img src="images/end.png" class="mapimg" alt="Enter Where Your Trip Will End" title="Enter Where Your Trip Will End" /> <label for="address2">Address/Intersection:</label> <br />
				    <input type="text" class="fbgcolor" id="address2" name="2a" size="35" maxlength="80" /></li>
				<li><label for="city2">City:</label> <br />
				    <input type="text" class="fbgcolor" id="city2" name="2c" size="35" maxlength="50" /></li>
				<li><label for="state2">State:</label> <label for="zip">Zip:</label> <br />
				    <input type="text" class="fbgcolor" id="state2" name="2s" size="2" maxlength="2" /> 
				    <input type="text" class="fbgcolor" id="zip2" name="2z" size="10" maxlength="10" /></li>
				<li><input type="submit" value="Get Directions" /></li>

			    </ul>

			</div>

			<div class="left"> 

			    <ul class="none">

				<li><img src="images/start.png" class="mapimg" alt="Enter Where Your Trip Will Begin" title="Enter Where Your Trip Will Begin" /> <label for="address">Address/Intersection:</label> <br />
				    <input type="text" class="fbgcolor" id="address" name="1a" size="35" maxlength="80" /></li>
				<li><label for="city">City:</label> <br />
				    <input type="text" class="fbgcolor" id="city" name="1c" size="35" maxlength="50" /></li>
				<li><label for="state">State:</label> <label for="zip">Zip:</label> <br />
				    <input type="text" class="fbgcolor" id="state" name="1s" size="2" maxlength="2" /> 
				    <input type="text" class="fbgcolor" id="zip" name="1z" size="10" maxlength="10" /></li>

			    </ul>

			</div>	

		    </form>
	
	    </fieldset>

<!-- End Container Div -->
	</div>

Both my code and css validate just fine.

Any ideas or good links?

Hello, first post here...

I have an image floated left, with an unordered list (ul) next to it. Problem is, the margin values I set for the list are totally ignored, so the list bullets end up overlapping the image. Seems the only solution is to set margins on the image, but that also pushes away non-overlapping content, like the h3 that is above the list and positioned fine.

Any ideas? Everything works fine if/when I float the list left, but that seems draconian...
Code:
css Code:
Original - css Code img.alignleft { margin-right:0.5em; display:inline; float:left; } ul, ol, dl { line-height:1.5em; margin:0 0 1em 1em; }

  

  


 img.alignleft {


 margin-right:0.5em;


 display:inline;


 float:left;


 }


 ul, ol, dl {


 line-height:1.5em;


 margin:0 0 1em 1em;


 } 

HTML4Strict Code:
Original - HTML4Strict Code <p><img src="" width="295" height="400" class="alignleft"/></p> <h3>A Sampling of Workshops We Have Brought to Nonprofits</h3> <ul> <li>An Introduction to Social Media for the Nonprofit</li> <li>An Introduction to Storytelling for the Nonprofit</li> <li>Using Social Media and Digital Storytelling in the Classroom</li> </ul>

  

 <p><img src="" width="295" height="400" class="alignleft"/></p>


 <h3>A Sampling of Workshops We Have Brought to Nonprofits</h3>


 <ul>


 <li>An Introduction to Social Media for the Nonprofit</li>


 <li>An Introduction to Storytelling for the Nonprofit</li>


 <li>Using Social Media and Digital Storytelling in the Classroom</li>


 </ul> 

On page - URL address blocked

I have an img floated to the left, with some text floating around the right side. After this image, I have an h2, styled to clear:both, with a top-margin: 3em.

With this floated image preceding, when the image is longer than the paragraph or other text floating around it, and the bottom of the image is "sitting on top of" the h2, the browser ignores the 3em top margin on the h2, unless I include a br, styled to clear:both.

So, I can solve the problem with this clearing break, but it sort of chafes me. This doesn't look like typical collapsing margin. I'm not losing the overlapping margin between the two elements, I'm losing all of the margin!

The page is coded with the breaks in place. I can re-create the "issue" using Firebug to remove the br tag.

Suggestions?

Thanks in advance.

No worries, made an obvious error.
Please delete this =)

( sorry for waste of moderators time )

I really hope somebody can help me out with this one. It might require some yucky hack, but I hope there's a good way to achieve it with regular css.

I got a header (140px height), main container and a footer.

The main container consists of three areas (from left to right):
- a fixed sized column with some illustration (48px)
- main contents column, (all available space)
- a fixed sized column with newsfacts and such (301px)

I've got an absolutely positioned div-element with an unordered list inside. The list-items got no bullets and are float: right, so the end result is a horizontal box. Each item is a link.

I want this div-element to be positioned at the top of the middle contents column with the unordered list bar right-aligned. For this I tried using a right-margin: 302px.

Also, each list-item is divided by a slim stripe/bar by giving the each li-element a left border. AND... the whole div-element got a bottom border which stretches as wide as the contents column is.

Here's a screenshot fragment in Firefox, the only browser in which I got it to work:
http://www.stack.nl/~rem/linksbox.jpg

I've got the following code:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
   <link rel="stylesheet" href="/screen_abs.css" media="screen" type="text/css" title="regular" />
   <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> 
   <title>Welkomstpagina</title>
</head>

<body>
            <div id="startpageLinksBox">
	    <div id="links">links</div>

<!--               <ul>
                  <li><a href="#" onclick="window.open(this.href); return false;">dummy</a></li>
                  <li><a href="#" onclick="window.open(this.href); return false;">dummy</a></li>
                  <li><a href="#">dummy</a></li>
                  <li><a href="#">dummy</a></li>            
                  <li><a href="#">dummy</a></li>
               </ul>
-->
            </div>

</body>
</html>

with the following CSS file.

Code:

body {
  margin: 0;
  width: 100%;
  background: url("../../images/common/bg_news.gif") repeat-y top right;
}

div#links {
  display: inline;
  height: 20px;
  border: solid 1px #000000;
  float: right;
  width: 200px;
  margin-left: 48px;
  margin-right: 0px;
}

div#startpageLinksBox {
  border-style: solid;
  border-width: 0px 0px 1px 0px;
  border-color: #e0e0e0;
  height: 20px;
  position: absolute;
  left: 48px;
  top: 140px;
  margin-right: 302px;
}

div#startpageLinksBox ul {
  margin-top: 0px;
  margin-bottom: 0px;
  list-style-type: none;
  border: solid 1px #000000;
  height: 20px;
}

div#startpageLinksBox ul li {
  float: right;
  border: solid 1px #e0e0e0;
  padding: 0px 5px;
}

a { font-family: Arial,sans-serif; font-size: 10px; color: #b0b0b0; }

Important note... since I was on the verge of screaming, I replaced the Unordered list temporarily with a div tag of class=links, to simplify things in a feeble attempt to isolate the problem.

It shows correctly in Mozilla Firefox 0.9.3 (0.1R1) by the way, but my boss wants it to be good in Firefox and Internet Explorer 5.5 and 6.0. Especially IE. I want it good in Firefox but darn... Firefox is the only one I get okay :P

The problem is.... with IE it puts the links to the right side of the screen. I've tried lots of things to get it 302 pixels from the right side of the screen, but everything gave problems.

I really hope somebody can give me an idea how I can fix it. It feels like it's just a small thing.

Hi

I have this small problem with one of my sites when viewed in IE *surprise surprise*

Let's say I have a div called "foo". I specify a width and set a padding of 10px.
Code:

<style>
.foo {
    width: 100px;
    padding: 10px;
}
</style>
<div class="foo">Bar</div>

Firefox, Opera and Mozilla interprets this as an element which's "text area" is 100px and there's an additional 10px on both sides. So the actual width of the div is 120px.
IE doesn't interpret it like that. If I set widht=100px, then the actual width is 100px regardless if I have paddings or not.

Now these different types of interprations are causing me a head ache. Is there any "trick" to make the div to be equally wide in all browsers? If not, I guess the only option is to use tables


- Kimppa

Hello, I'm working on some really simple CSS and it's giving me wildly different results in Firefox and in IE.

Here is the stylesheet:

PHP Code:
 body {
    background-color: #DECFEF;
}

.example
{
    background-image: url("images/example.gif"); 
    border-width: thin;
    border-color: white;
    border-style: solid;
    padding: 35px 35px 35px 35px;
} 





And here is the HTML file:

PHP Code:
<html>
<head>
<title>Chatterbox</title>
<link rel="stylesheet" type="text/css" href="/teststyle.css">
</head>
<body>
<table class='example'><tr><td>
  hello
</td></tr></table>
</body>
</html> 





All of this works (the image in the background, the white border, etc.) except the padding! In IE there is no padding at all, but in Firefox there is 35px padding, as specified in the stylesheet.

You may see this yourself if you go to this URL in the two different browsers: http://www.chatterboxletters.com/test3.html


Any help is greatly appreciated

~j.

Okay,

So here is the situation and it has had me stumped for 2 days.

I have a site that was displaying perfectly on my local server - I have xampp installed to test site locally. I have a site that is displaying perfectly in Opera, Google Chrome, Safari and Firefox....and locally on IE8.

Now here is the kicker. Once I upload it to my server online the layout is thrown out of whack in IE.

Why would there be a difference between a local view and an online view in IE?

Hi!

Is it a good idea to always use padding and never margin (span, divs, etc.)? or would a combination between margin and padding be better?

P.S. In some places I must use padding... in the others I use margin but could use padding instead... wouldn't it be more consistent to always use padding?

Thank you

Hello,

Can anyone explain me why the texts in the following example are not in the same (relative) position? It looks like that in the first container, the margin is actually more than I specified (10px)...

I don't get it... :S

Thanks,
diodorus

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" xml:lang="en" lang="en">

<head>
    <title>Title</title>

<style type="text/css">

#container{
    margin: 0px;
    padding: 0px;
    width: 1000px;
    background: #ccc;
}

.block {
    background: #0ff;
    float: left;
    height: 100%;
    margin: 10px;
    text-align: left;
    width: 230px;
}

.block2 {
    background: #0ff;
    float: left;
    height: 100%;
    padding: 10px;
    text-align: left;
    width: 230px;
}

</style>

</head>

<body>

<p>First:<p>

    <div id="container">
        <div class="block">aaa</div>
        <div class="block">bbb</div>
        <div class="block">ccc</div>
        <div class="block">ddd</div>
    </div>

<p>Second:<p>

    <div id="container">
        <div class="block2">aaa</div>
        <div class="block2">bbb</div>
        <div class="block2">ccc</div>
        <div class="block2">ddd</div>
    </div>

</body>
</html>

I've run into this problem a few times. The padding attribute has spottty support in IE. Same with margin. Has anyone found a workaround?

For example, I would like paragraphs and bullet points to have extra space above them. In the past, I've set a style using padding-top to specify this space. However, in IE it yields some bad results.

Similarly, I've got some text links which I would like to bump over to the right a few pixels. Padding or margin would sure come in handy.

Any other ways to achieve the same result?

Hi, i try to print some variables on a ticket. A ticket which is already printed. I try to reach a result like this:



This is the html:
PHP Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<HTML>
   <HEAD>
      <TITLE>Printing Ticket...</TITLE>
      <LINK REL="stylesheet" TYPE="text/css" MEDIA="print" HREF="foo.css">
          <link rel="stylesheet" type="text/css" media="screen" href="foo.css">
   </HEAD>
   <BODY>
      <div id="menu" class="menu"><center><p><br>The ticket will be printed...<p>
      <input type=button value="Close Window" onClick="javascript:window.close();">
      </p></p></center></div>
      <div id="content" class="content">C 25 3 12345</div>
   </BODY>
</HTML> 





The foo.css:

PHP Code:
@media print {
    body {
    background: white;
    font-size: 12pt;
    FONT-FAMILY: Verdana;
     background: transparent none;
    }
    #menu {
   display: none;
   }
    
#content {
    margin-left: 30px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-top: 0px;
    padding-top: 0px;
    padding-left: 0px;
    padding-right: 0px;
    padding-bottom: 0px;
    text-align: left;
}
  }
  @media screen {
    body { font-size: 14px; line-height: 1.2 }
     #content {
   display: none;
   }
  } 





This piece of the div tag 'content' don't listen to me:
PHP Code:
 margin-left: 30px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-top: 0px;
    padding-top: 0px;
    padding-left: 0px;
    padding-right: 0px;
    padding-bottom: 0px; 





I have most of them at 0px, but whatever i insert into there it doesn't change the position of the variables. Are there are other codes to define a position?

Thanks for any help.

Take a look at http://actrucking.com/. I just added the orange link towards the middle of the page that says "Get a FREE Online Quote Now!!" I'd like to push it down a bit so it is more centered in the blue area, but I can't seem to get the text to acknowledge margin or padding? Here are what the styles look like:

Code:

#tlCallBox { background:#336799; height:75px; display:block; float:left; width:868px; margin-left:10px; position:relative; margin-bottom:30px}
#tlCallBox h2{ color:white; font-size:19px; margin: 15px 0 0 30px}
#tlCallBox p { color:White; margin-left:32px}
#tlCallBox b { margin:20px 0 0 120px; font-weight:bold; font-size:20pt}

First time poster here - bear with me!

I've used the CSS Validation link, and have come to find the developer of the theme I'm using has some sloppy code that needs cleaning up, although I'm not so certain that's the cause of my dilemma.

Let's get some basics out of the way: My current theme is supplied for WordPress (Yes, I'm using WordPress too) My current browser is Google Chrome (I experience the issue in Firefox and IE as well) I've tried requesting help on the WP forums, but they redirect posters to third-parties for assistance with what they label "fundamental formatting". I've tried several Google searches to no avail (not sure my current theme title is actually the problem)
To be more specific, I seem to be having issues with excess margin/padding on my theme, and haven't a clue how to remove it. When uploading a background image, the right side of the image seems to "crinkle" and looks absolutely hideous.

When I change the background color of theme (via theme settings in the WP dashboard), I can see a substantial amount of space on the right side of the screen, which appears to be an issue with excess margin or padding (not sure which, if either).

I've performed at least a dozen searches, and haven't been able to find a solution to the problem, let alone someone with the same issue. I should also mention I'm using a widescreen 1980x1080 resolution, however the problem persists even with a different resolution. Expanding the background image only worsens the "crinkling" and shrinking it just looks plain silly.

Adjusting the background color of the site seems to help with the odd margin/padding, (rendering it invisible by giving it the same exact color as the image) - but this still leaves me unable to customize my background image further, only being able to have graphics or additional imagery on the left side.

I'm not exactly the most "advanced" user of CSS. I have limited knowledge, but can typically troubleshoot the most basic issues (centering text, adjusting positioning of content, etc). If this post doesn't provide enough information, by all means, say so!

You can have a look-see at my site -> ImperiumUO [dot] com.

I appreciate any and all effort this community may provide in getting this annoying issue resolved.