CODEWITHSUNDEEP
csshtmlcss-float
TupidaMC - DEV
TupidaMC - DEV

Reputation: 47

CSS: two, divs side-by-side

How can I make the green/yellow box be displayed next to the sidebar instead of below it? The green/yellow part should be 100% width.

Screensho

Here is my sourcecode: HTML

    <div id="sidebar">

    </div>

    <div class="header">

    </div>

CSS

#sidebar{
    background-color: #404040;
    height: 100%;
    width: 50px;
}

.header{
    margin-left: 50px;
    width: 100%;
    height: 200px;
    background-color: #808000;
}

Upvotes: 2

Views: 14946

Answers (2)

ztirom
ztirom

Reputation: 4438

Give this CSS code a try, I added a float property. You can also use this jsfiddle here, to see what I changed.
Also you want to have a look at the link and the tip (about clearing) that @Ian Clark provided in the comments: micro clearfix hack 

#sidebar{
    background-color: #404040;
    height: 100%;
    width: 50px;
    float: left;
}

.header{
    margin-left: 50px;
    height: 200px;
    background-color: #808000;
}

For more information about float check:

Upvotes: 4

Hiigaran
Hiigaran

Reputation: 831

Add display:inline-block to both #sidebar and .header

Upvotes: 6

Related Questions