Css Box Model Does Not Stretch Using Padding
I have a project title as a header in my webpage. This project title is within a div called 'pagetitle'. After the project title, i have two words which one has to be on the left a
Solution 1:
You need to clear floats.
Add this to your css
.clearfix:before, .clearfix:after { content: "\0020"; display: block; height: 0; overflow: hidden; } .clearfix:after { clear: both; } .clearfix { zoom: 1; }
Add class .clearfix to your top div so you have div class="pagetitle clearfix"
Solution 2:
You have to "contain" your floats. One way to achieve that is setting overflow: hidden
on the container element. There are a thousand other techniques though, called clearfixes (you can find a lot on the Internet), some of them involve adding an element with clear: both
on it.
Some suggested reading:
Solution 3:
-left and right are not valid html tags
-separate your html and style (Use external style-sheet)
Example fiddle
Post a Comment for "Css Box Model Does Not Stretch Using Padding"