Skip to content Skip to sidebar Skip to footer

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.

  1. Add this to your css

    .clearfix:before, .clearfix:after { content: "\0020"; display: block; height: 0; overflow: hidden; } .clearfix:after { clear: both; } .clearfix { zoom: 1; }

  2. 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"