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


.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; }


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

Now, works all fine and this is the output i want

But, if I add ANY padding to left_wrapper in the css, this happens..

any guidance will be appreciated :)

Recommended Answers

All 2 Replies

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


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).


Be a part of the DaniWeb community

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