Menu
I am trying to create 2 side banners (left and right) with fixed positioning, and a centered container for the content.
The problem is that when minimizing the screen, the 2 side banners cover the centered container. I need a CSS solution to set the minimum width of the view to 860px; after which, the window becomes scrollable and divs do not overlap. The perfect solution is:
The HTML I am using is as such:
<div class="left" style="position:fixed; height:100%; background-color:#7fb4dd; top:43px; left:0px; width:180px;">
</div>
<div class="center" style="margin:100px 180px 0 180px;">
<div style="width:100%;">
<div style="width:500px; margin:0 auto;">
</div>
</div>
</div>
<div class="right" style="position:fixed; height:100%; background-color:#7fb4dd; top:43px; right:0px; width:180px;">
</div>
The above code prevents the left bar from overlapping the center container; but the problem is still present with the right bar.
This is a fiddle of the code: preview
390
You need to wrap the three DIVs in a wrapping DIV and set the min-width to prevent the overlap. This prevents it from getting narrower than the three columns. Add up the widths, set that as the minimum.
178
Here is a pure HTML/CSS solution for you , tell me if it is not exactly what you needed.
<html>
<head>
<style type="text/css">
body{
margin:0;
padding:0;
line-height: 1.5em;
}
b{font-size: 110%;}
em{color: red;}
#topsection{
background: #EAEAEA;
height: 90px; /*Height of top section*/
}
#topsection h1{
margin: 0;
padding-top: 15px;
}
#contentwrapper{
float: left;
width: 100%;
}
#contentcolumn{
margin: 0 200px 0 230px; /*Margins for content column. Should be "0 RightColumnWidth 0 LeftColumnWidth*/
background-color : red;
width : 400px;
margin-left : auto;
margin-right : auto;
}
#leftcolumn{
float: left;
width: 200px; /*Width of left column*/
margin-left: -100%;
background: #C8FC98;
}
#rightcolumn{
float: left;
width: 200px; /*Width of right column*/
margin-left: -200px; /*Set left marginto -(RightColumnWidth)*/
background: #FDE95E;
}
#footer{
clear: left;
width: 100%;
background: black;
color: #FFF;
text-align: center;
padding: 4px 0;
}
.innertube{
margin: 10px; /*Margins for inner DIV inside each column (to provide padding)*/
margin-top: 0;
height : 700px;
}
.innertubetop{
margin: 10px; /*Margins for inner DIV inside each column (to provide padding)*/
margin-top: 0;
}
</style>
</head>
<body>
<div id="maincontainer" style = "min-width : 800px;"> <!-- this will be sum of width of all three columns-->
<div id="topsection"><div class="innertubetop"><h1>Hello iam navigation bar</h1></div></div>
<div id="contentwrapper">
<div id="contentcolumn">
<div class="innertube"><b>Center Column </b></div>
</div>
</div>
<div id="leftcolumn">
<div class="innertube"><b>Left Column: <em>200px</em></b></div>
</div>
<div id="rightcolumn">
<div class="innertube"><b>Right Column: <em>200px</em></b></div>
</div>
</div>
</body>
</html>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
