Question

I am trying to learn HTML/CSS by trying to make simple website in HTML/CSS. I have so far build some basic skeleton but there is something I cant solve.

I have a problem where div’s articlelisting, sidebar1, sidebar2 are placed inside a div footer, but I want to div’s articlelisting, sidebar1, sidebar2 be outside footer.

Here is relevant code:
HTML:

        <!-- article listing -->
        <div class="articlelisting">
            articlelisting
        </div>

        <!-- sidebar 1 -->
        <div class="sidebar1">
            sidebar1
        </div>

        <!-- sidebar 2 -->
        <div class="sidebar2">
            sidebar2
        </div>

        <!-- footer -->
        <div class="footer">
            footer
        </div>  

CSS:

.articlelisting {
display: inline;
width: 48%;
float: left;
}

.sidebar1 {
display: inline;
width: 24%;
float: right;
}

.sidebar2 {
display: inline;
margin-right: 15px;
width: 24%;
float: right;
}

 .footer {
width: 100%;
border: solid 1px red;
}

EDIT:
I have placed articlelisting div. Sorry I missed it.

My question is why are divs articlelisting, sidebar1, sidebar2, inside div footer, and how to place them outside div footer?

Thanks

Answer 1

Hey now clear to your footer as like this

    .footer{
    clear:both;
    overflow:hidden;
       /// and write some properties as required to
    }

Live demo http://tinkerbin.com/9vrEFCqo