Hey..
I have a problem with my CSS, let me show you..

CSS

.wrap { font-size:12px; width:980px; margin:auto; }
.left_wrapper { height:auto; float:left; width:20%; background:#699; }
.right_wrapper { height:auto; float:right; width:79.7%; border-color:#b7b6b6; border-top-width:0px; background:#993; }

HTML

<div class="wrap">
  <div class="left_wrapper">
    blah blah
  </div>
  <div class="right_wrapper">
    blah blah
  </div>
</div>

Now, works all fine and this is the output i want
[img]http://i1104.photobucket.com/albums/h333/Clarkey4/903cf051.png[/img]

But, if I add ANY padding to left_wrapper in the css, this happens..
[img]http://i1104.photobucket.com/albums/h333/Clarkey4/2eb02c27.png[/img]

any guidance will be appreciated :)

Recommended Answers

The padding is causing the two elements to exceed the 980px width. Increase the width and it should stay.

Regards
Arkinder

Jump to Post

All 2 Replies

The padding is causing the two elements to exceed the 980px width. Increase the width and it should stay.

Regards
Arkinder

While you add padding left or padding right, you have to deduct from width that

padding. for i.e., left_wrapper width is 20% & right_wrapper width is 79.7% (80%) total

width is 100%, now you add 5% padding right to left_wrapper then you have to deduct 5%

from witdh of any one div ( left_wrapper or right_wrapper).

Regards,
Akhtar

Be a part of the DaniWeb community

We're a friendly, industry-focused community of 1.19 million developers, IT pros, digital marketers, and technology enthusiasts learning and sharing knowledge.