-1

I want to cover two divs with border by using class wrapper-side-content.
Height must be set to auto and width 100%. But it doesn't work as I wish.
I already use position and z-index, but no works.

Here's my code:

<style>
.clear{clear:both;}
.pad{padding:5px 0px;}
.header-wrapper,.footer-wrapper,.wrapper-side-content{border:1px solid #e0e0e0; position:relative; border-radius:3px;}
#body-wrapper{max-width:100%; margin:0px auto; padding:0px 0px;}
.wrapper-side-content{max-width:100%; height:auto;}
.header-wrapper,.footer-wrapper{max-width:100%;}
.leftbar-wrapper,.content-wrapper{float:left; display:inline-block;}
.leftbar-wrapper{width:29.8%;}
.content-wrapper{width:69.9%;}
.innerpad{padding:5px;}
</style>

<div id="body-wrapper">
    <div class="header-wrapper innerpad">
        <h1>mywebcom</h1>
    </div>
    <div class="clear pad"></div>
    <div class="wrapper-side-content innerpad">
        <div class="leftbar-wrapper innerpad">
            This is a leftside bar menu
        </div>
        <div class="content-wrapper innerpad">
            This is a main content
        </div>
    </div>
    <div class="clear pad"></div>
    <div class="footer-wrapper innerpad">
        All Rights Reserved. &copy; <?php echo date('Y'); ?> <a href="/" title="" target="top">mywebcom </a>
    </div>
</div>

enter image description here

Otherwise, you have suggestion for my CSS.

Andriy Ivaneyko
  • 20,639
  • 6
  • 60
  • 82
don magug
  • 332
  • 1
  • 12
  • well, because I don't understand the question in duplicate source you mean, I use overflow:hidden but it didn't work. But, thanks anyway. learners can mean anything. – don magug Jan 20 '16 at 11:14

1 Answers1

3

When you use float, you have to clear it. Add this to your CSS:

.wrapper-side-content::after {
  content: "";
  display: block;
  clear: both;
}

Alternatively, you can add overflow: hidden; to .innerpad:

.innerpad {
  overflow: hidden;
}
Michał Perłakowski
  • 88,409
  • 26
  • 156
  • 177