Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Chris Miller on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Margin / Padding question 2

Status
Not open for further replies.
GiffordS

GiffordS

Programmer
May 31, 2001
194
CA
I have to divisions, "abar" and "meat". I want "abar" to float left, with "meat" running beside it on the right. That part works. Where I'm running into trouble is that I need a bit of padding or margin for the content in "meat" so it doesn't start right at that left edge of "abar". I've run my css through the w3 validator and it comes up clean, but I'm not getting the content to move at all. The CSS:

Code: 
#meat
{
margin-top: 0px;
margin-left: 50px;
padding-left: 50px;
height: auto;
font-family: tahoma;
font-size: 12px;
font-weight: 500;
color: #663333;
text-align: left;
}

As you can see, in my desperation I tried both padding and margin on the left side. Neither one has any effect.

As for the html, it's totally straightforward...

Code: 
...<div id="abar">Content</div><div id="meat">More Content</div>...

Where am I going wrong here?
 
Sort by date Sort by votes
One trick to really help with layout (especially when using floats) is to put 1 pixel borders of different colors around your containers. That lets you know where everything is being positioned. Applying this rule to a sample that is similar to the one you described:
Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml">[/URL]
<head>
<title>test</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<script type="text/javascript"></script>
<style type="text/css">

div#abar {
   width:200px;
   float:left;
   height: auto;
   font-family: tahoma;
   font-size: 12px;
   font-weight: 500;
   color: #663333;
   text-align: left;
   border:1px solid red;
}

div#meat {
   margin-top: 0px;
   margin-left: 50px;
   padding-left: 50px;
   height: auto;
   font-family: tahoma;
   font-size: 12px;
   font-weight: 500;
   color: #663333;
   text-align: left;
   border:1px solid green;
}

</style>
</head>
<body>
   <div id="abar">
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam ornare lacus quis justo. Vivamus pulvinar, pede ac blandit viverra, metus felis iaculis lacus, vel condimentum purus quam id tortor.</p>
   </div>
   <div id="meat">
      <p>Phasellus et ipsum sit amet dui tincidunt posuere. Nulla justo. Nulla viverra dolor ac risus. Donec nunc tellus, dignissim sit amet, luctus eget, interdum quis, lectus. Etiam condimentum. Aliquam quam dolor, tempor eu, elementum a, luctus at, sem. Nunc suscipit viverra lorem. Fusce tellus nibh, imperdiet non, iaculis id, accumsan ut, orci. Quisque risus pede, consectetuer quis, dignissim ut, fringilla suscipit, augue. Aliquam erat volutpat. Mauris malesuada, lacus a congue mattis, lectus turpis egestas nulla, nec congue odio turpis nec urna. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Vestibulum convallis, dolor et malesuada nonummy, tortor mauris congue sapien, eget tempus purus libero sit amet ante. Donec nonummy sapien a velit. Aenean lacinia lobortis enim. Mauris vestibulum neque porta metus. Nunc vel lectus. Ut eu lacus. </p>
      <p>Quisque ornare interdum velit. Nunc orci felis, laoreet et, vehicula et, faucibus ut, tellus. Etiam vehicula luctus justo. Aliquam congue. Nulla facilisi. Curabitur et augue a neque interdum tempor. Aliquam nec tellus quis ipsum accumsan ornare. Cras eros. Vestibulum bibendum bibendum nibh. Proin eleifend risus quis velit viverra placerat. Quisque malesuada, dolor vehicula faucibus fermentum, risus sem interdum ligula, in commodo diam risus at lorem. Sed feugiat tortor vel lorem tempor nonummy. Integer lobortis, justo vel aliquam pellentesque, nisi leo suscipit urna, nec dictum arcu est vel nulla. Sed lacinia lectus id lorem.</p>
   </div>
</body>
</html>

You can see that the border on "meat" extends far to the left behind "abar". The reason for this is that floats do not have an influence on containers, just the content within the container. The floated div "abar" pushes the content of the "meat" div so that it floats around it. As you can see with the content from the "meat" div that floats under the "abar" div, it is 50px in from the left of the border - this is from the padding you set. Also, you'll notice that the green border stops 50px from the left of the page - this is from the margin you set.

There are 2 quick fixes for this - you can float the "meat" div as well, or give the meat div a left margin that is big enough to clear the "abar" div. In the example I posted above a 250px left margin would exhibit the behavior you are expecting.

-kaht

[small](All puppies have now found loving homes, thanks for all who showed interest)[/small]
 
Upvote 0 Downvote
My last response didn't go through so I'll try it again....

Thank you very much for the help. I was not aware that float only applied to content. I really do appreciate you taking the time to explain it.
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

jason.lex
  • Locked
  • Question
Bootstrap grid and columns question
Replies
0
Views
129
jason.lex
jason.lex
lupidol
  • Locked
  • Question
What does a question mark (?) stands for in ancho tag ? 1
Replies
2
Views
380
lupidol
lupidol
PeDa
  • Locked
  • Question
move wide illustration outside left margin
Replies
1
Views
93
PeDa
PeDa
Katerine
  • Locked
  • Question
CSS question: Displaying 2-level unordered lists in a table layout? 1
Replies
7
Views
215
Katerine
Katerine
1DMF
  • Locked
  • Question
tbody padding-top ignored by IE
Replies
1
Views
67
1DMF
1DMF

Part and Inventory Search

Sponsor

Back
Top