CODEWITHSUNDEEP
htmlcss
php_nub_qq
php_nub_qq

Reputation: 16065

Float + Padding = Trouble

I have this problem where one element is floated and I cannot set a padding to the other element on the same line because it appears in the beginning and not where I want it to.

FIDDLE

HTML

<header>
        <h1>John Doe</h1>

    <nav>
        <ul>
            <li>Home</li>
            <li>About</li>
            <li>Game</li>
            <li>Contact</li>
        </ul>
    </nav>
</header>
<div class='body'>
    <section class="body_heading">
            <h2>About Me</h2>

    </section>
    <aside>
        <section>Lorem ipsum</section>
    </aside>
    <section class="body_content">lorem ipsum</section>
</div>

CSS

html, body {
    min-height: 100%;
}
body {
    background: #f1f1f1;
}
header {
    background: #CAE5FF;
    float:left;
    height: 100%;
    color: gray;
}
header > * {
    padding: 5% 15%;
}
header > nav {
}
header > nav > ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
header > nav > ul > li {
}
.body {
    padding: 1%;
}
aside {
    float: right;
}

The problem is between the header and the .bodyelement I want to be a little space but padding doesn't affect it.

Upvotes: 0

Views: 95

Answers (5)

tacticurv
tacticurv

Reputation: 518

Add margin-right to your header in CSS.

Here is the example

header {
background: #CAE5FF;
float:left;
height: 100%;
color: gray;
margin-right: 10px;
}

Upvotes: 0

Shyam
Shyam

Reputation: 792

Use below Options

.body{overflow:hidden;} /* or */
.body{margin-left:125px;} /* width of left contents + 10 or 20 for some space */

Upvotes: 1

Abhitalks
Abhitalks

Reputation: 28437

The padding of 1% that you have specified on the div.body is working perfectly fine.

The problem lies in the fact that the header is floated and does not have a width. Also, the div.body is not floated. So, the div.body takes up all the width while the content gets shifted because of the left floated header.

This can be seen here: http://jsfiddle.net/2fyqqwjx/1/

See the green border of div.body ?

A very simple solution (with your current markup) would be to give a width to the header and provide an equivalent margin-left to your div.body:

* { box-sizing: border: box; }
html, body {
    height: 100%; overflow: hidden;
}
header {
    float: left;
    height: 100%;
    width: 20%; /* give a fixed width here */
}
.body {
    padding: 1%; margin-left: 20%; /* give a margin-left equivalent to header width */
}

See this demo: http://jsfiddle.net/uc0rh9d0/1/

.

Upvotes: 0

Berk Kaya
Berk Kaya

Reputation: 470

Give float:left; to .body it will be enough

Upvotes: 0

Vipul Hadiya
Vipul Hadiya

Reputation: 882

.body{padding-left:35% //whatever you want }

Upvotes: 0

Related Questions