I am trying to make a 3 column website. Left and right columns are small 240px divs attached to the sides. The middle div is a stretchable area where all the elements inside stretch according to the size of the browser.
So far I have it set up like this :
body, html {
height:100%;
}
body {
margin:0;
}
.container {
background:orange;
height:100%;
width:100%;
overflow:hidden;
}
.left {
width:240px;
height:100%;
background:rgba(0,0,0,0.5);
position:absolute;
top:0;
left:0;
}
.middle {
width:100%;
height:100%;
background:orange;
}
.right {
width:240px;
height:100%;
background:rgba(0,0,0,0.5);
position:absolute;
top:0;
right:0;
}
And:
<div class="container">
<div class="left"></div>
<div class="middle">
// all the content
</div>
<div class="right"></div>
</div><!--container-->
How do I make the content in the middle column stay in between the left and right columns? I was thinking to use margin-left and margin-right but I feel it is not a good way of doing it.
Live:
http://codepen.io/daydreamer/pen/0479cc8de929cedc2ac519280a3044aa
If you are supporting modern browsers, I would try using flexbox:
.container {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
}
.container div {
flex-grow: 1;
height: 50px;
}
.side {
max-width: 240px;
min-width: 240px;
background: red;
}
<div class="container">
<div class="side"></div>
<div class="middle">
// all the content
</div>
<div class="side"></div>
</div>
jsfiddle example
Flexbox resource
You don't need to use margin-left, but margin-right would be useful. I would use float: left and get rid of position: absolute on the left sidebar, and use margin-right: 240px and get rid of width: 100% on the middle div.
CSS:
.left {
width:240px;
height:100%;
background:rgba(0,0,0,0.5);
top:0;
left:0;
float:left;
}
.middle {
height:100%;
background:orange;
margin-right: 240px;
}
.right {
width:240px;
height:100%;
background:rgba(0,0,0,0.5);
position:absolute;
top:0;
right:0;
}
Use Twitter Bootstrap to do n-column design and it will save you a lot of work. Right click on inspect the HTML code on the example page I provided and you'll see that all you need to do is set classes to a few div's and it works when you include the bootstrap JS/CSS files.
Related
I know that this is not an uncommon problem, as a bit of Googling threw up quite a few pages with similar problems to my own. But try as I might I can't fix it so here goes:
I am currently building the website to my rugby team. It has a two column layout, with a main area and a sidebar. The relevant HTML is roughly
<div id="wrapper">
<div id="maincolumn"></div>
<div id="sidebar"></div>
<div class='clear'></div>
</div>
From some of the websites, I have gleaned that I need to set body and html to 100% and all the containers, so I have:
html, body, #wrapper, #innerwrapper, #sidebar { height: 100%; min-height: 100%;
#wrapper { max-width:900px; margin:0 auto; width:90%; }
#sidebar { float: right; width: 35%; padding:2%; background-color:#f7f7f7; }
#maincolumn { width:56%; float:left; padding-right:5%; }
.clear { clear:both; }
The problem I am having, is that when #maincolumn has a lot of content, the sidebar does not expand all the way down to the bottom of the page which is the behaviour I would like. I made some progress by setting all the containers to 100% and then adding the clear element, but that still only expands it a short way.
Instead of floating, you can use CSS tables:
#wrapper {
display: table;
}
#sidebar, #maincolumn {
display: table-cell;
}
Demo
Since you want both columns to have the same height regardless of the amount of content within them, first you have to understand that setting height:100% sets the height in relation to the width of the parent div(or containing block).
So if that's the case, here's what you can do:
#wrapper{
height:900px;
}
#sidebar{
height:100%;
}
#maincolumn{
height:100%;
}
DEMO
HTML :
<div id="wrapper">
<div id="maincolumn">vgnhngbbv hbcv nfvfbngbc</div>
<div id="sidebar">dfrtnjnbc ghm gbgfnbvfnythgfbbfg</div>
<div class='clear'></div>
</div>
CSS :
html, body, #wrapper, #maincolumn, #sidebar { height: 100%; min-height: 100%;}
#wrapper { max-width:900px; margin:0 auto; width:90%; }
#sidebar { float: right; width: 35%; padding:2%; background-color:#f7f7f7; }
#maincolumn { width:56%; float:left; padding:2%; background-color:#ff0000; }
.clear { clear:both; }
DEMO
I have layout comprising of a 100% width header, 2 column content divs (30-70% width) and a 70% width footer (visible only in the bottom of right div).
My HTML mark up is like:
<section id="mySection" >
<header id="headerTop">
</header>
<div id="wrapperLeft">
</div>
<div id="wrapperRight">
</div>
<footer id="footerRight">
</footer>
</section>
My CSS is
#mySection
{
margin:0 auto;
padding:0;
text-align:center;
vertical-align:middle;
overflow:hidden;
}
#headerTop
{
position:absolute;
top:0;
left:0;
height:40px;
width:100%;
overflow:hidden;
}
#wrapperLeft
{
position:absolute;
top:40px;
left:0;
width:30%;
bottom:0;
overflow:auto;
}
#wrapperRight
{
position:absolute;
top:40px;
left:30%;
width:70%
bottom:30px;
overflow:auto;
}
#footerRight
{
position:absolute;
left:30%;
bottom:0;
width:70%;
overflow:hidden;
}
I would like to know if I can design this better such that if i hide the left or right div, the other div is displayed at 100%. I think i can change the CSS dynamically via javascript and adjust the left and width values for the other div, but it is getting messy and would like to avoid it if possible.
Ideally would love to call show or hide on the div and the other div automatically adjusts itself to 100% width.
I have no control over the height of the content in either div and would want the browser to display scrollbar when the content height exceeds the window.
Thanks in advance for your help.
I would add a wrapper to the divs so you can float then instead of positioning then absolutely. This way you can make at least one div 100% wide. For instance the right div. If you want both divs to be dynamic in size you will have to use jquery. For instance adding classes if you want to keep the jquery to a minimal.
example HTML:
<div id="header"></div>
<div id="main">
<div id="left"></div>
<div id="right"></div>
</div>
<div id="footer"></div>
example CSS :
#main{
position:relative;
overflo:hidden // This will make the container grow with the children
width:960px;
}
#left{
width:200px;
float:left;
height:100%;
}
#right{
float:left;
width:100%;
height:100%;
}
Example of CSS with additional classto toggle divs
#main.only-left #left{
width:100%;
}
#main.only-left #right{display:none;}
I think I know what you're talking about. I've created a little example here. Basically set 30% on the sidecolumn, and display: block; on the main column. Click on the body anywhere to toggle the side column to show how the main column adapts... is this going in the right direction?
Codepen sketch
HTML
<div class='wrapper'>
<header>Header</header>
<section>
<aside>Sidebar</aside>
<article>Main article</article>
</section>
<footer>Footer</footer>
</div>
CSS
body {
margin: 0;
padding: 0;
}
section {
overflow: hidden;
position: relative;
}
header {
background: crimson;
height: 100px;
width: 100%;
}
aside {
background: #efefef;
float: left;
height: 300px;
width: 30%;
}
aside.hide { display: none; } /** For demo purposes **/
article {
background: #ccc;
display: block;
height: 300px;
}
footer {
background: crimson;
float: right;
height: 100px;
width: 70%;
}
jQuery (just for hideToggle example)
$('html').on('click', function(){
$('aside').toggleClass('hide');
});
UPDATE: Here's an example with a little assitance from jQuery for class toggling. Could probably be generalized more... http://codepen.io/kunalbhat/pen/kuAcg
I have the following issue related to a three columns header.
I need that the middle column be 960px width and centered. When document width is higher that 960px, other div columns come up and its width will depends on the exceded width.
Here is an image
The sideblocks of the header will contain a background-color, on the right one, and an image repeated-x on the left one.
EDIT: it should be IE9/8/7 compatible.
http://jsfiddle.net/j6ReH/1/
<div class="wrapper">
<div class="left"></div>
<div class="central"></div>
<div class="right"></div>
</div>
.wrapper {
width:100%;
height:50px;
}
.central {
width:960px;
height:50px
margin:0 auto;
float:none;
background-color:#CCCCCC;
}
.left {
width:auto;
height:50px
float:none;
background-color:#ABC123;
}
.right {
width:auto;
height:50px
float:none;
background-color:#123456;
}
Simply apply display: table; to the wrapper and display: table-cell; to the children.
Demo: http://jsfiddle.net/j6ReH/2/
HTML
<div class="wrapper">
<div class="left"></div>
<div class="central"></div>
<div class="right"></div>
</div>
CSS
.wrapper {
width:100%;
height:50px;
display: table;
}
.central {
width:360px;
height:50px;
background-color:#CCCCCC;
display: table-cell;
}
.left, .right {
height:50px;
display: table-cell;
background-color:#ABC123;
}
.right {
background-color:#123456;
}
Note
It is > IE7 compatible, for IE6 and IE7 you may want to take a look at this workaround: http://tanalin.com/en/projects/display-table-htc/
You can put the center part in a div with css "margin: 0 auto;float:none;width:960px;" and the remaining two columns with "width:auto;" According to me it will work in this case.
You could do it by setting the body to one color
Then setting your middle div to width 960px with margins auto then on the right
You could use something like
#media only screen and (max-width: 960px)
{
#yourrightdiv {
display: none;
}
}
I am trying to design a web page which is divided into 3 regions:-
1) a header region
2) a left navigation pane
3) The main content area
For this, I am presently using the following CSS classes:-
.Content
{
position:absolute;
overflow:auto;
top:10%;
left:20%;
width:80%;
height:90%;
}
.Header
{
position:absolute;
left:0;
top:0;
height:10%;
width:100%;
background-color:Blue;
text-align:center;
}
.NavPanel
{
position:absolute;
top:10%;
left:0;
height:90%;
width:20%;
overflow:auto;
background-color:Menu;
}
The height and width of body tag are set to 100%.
I dont think this is a very good way of doing what I want to do. For example, when I reduce the height of the browser, the header area reduces proportionally, ultimately vanishing. Also, the page is rendered as expected by Chrome, but for some reason, horizontal scroll bar appears in IE8.
I dont have great knowledge in HTML and CSS, so I just wanted to know if there is any better way of doing this. Thanks!
You may want to specify an absolute height for the header, e.g.:
.Header
{
position:absolute;
left:0;
top:0;
height:100px;
width:100%;
background-color:Blue;
text-align:center;
}
You can also specify the header in measures of the font size: height: 10em (1 em should be the width of the letter "m"; 1 ex would be the height of the letter "x").
Note that it might be better to remove the "position" attributes both for the header and the content. In this case, positioning would be relative (the default), making the content appear below the header regardless of the size of the header. In that case, remove the "height" attribute for the content.
You could try setting a min-height on the header and using media queries.
For example, you could set min-height: 2em; and use a media-query like:
#media (max-height: 20em) { /* the min-height for the header = 10% of the max-height used here */
.content, .navPanel {
top: 2em; bottom: 0;
}
}
DEMO
However, media queries don't work in IE 8 or older.
Hi i think you are looking for page layout like this copy and paste this code into any notepad and check it out.
<html>
<head>
<style type="text/css">
.Container
{
background-color:yellow;
height:100%;
weight:100%;
}
.inner
{
float:left;
top:10%;
height:90%;
width:100%
}
.Content
{
float:left;
top:10%;
left:20%;
width:80%;
height:100%;
background-color:skyblue;
}
.Header
{
float:left;
height:10%;
width:100%;
background-color:Blue;
text-align:center;
}
.NavPanel
{
float:left;
top:10%;
height:100%;
width:20%;
background-color:Menu;
}
</style>
</head>
<body>
<div class="Container">
<div class="Header"></div>
<div class="inner">
<div class="NavPanel"></div>
<div class="Content"></div>
</div>
</div>
</div>
</body>
</html>
Here's a basic layout that you can use and expand upon:
http://jsfiddle.net/yUCdb/
You may try;
HTML
<div id="container">
<div id="header">
</div>
<div id="sidebar">
</div>
<div id="viewer"></div>
</div>
CSS
html, body {
margin: 0;
padding: 0;
border: 0;
}
#header, #sidebar, #viewer {
position: absolute;
}
#header{
top: 0;
width: 100%;
height: 10%;
background: yellow
}
#sidebar {
top: 10%;
width: 20%;
bottom: 0;
background-color: red;
z-index:100;
}
#viewer {
top: 10%;
left: 20%;
right: 0;
bottom: 0;
background-color: green;
}
Here is a live demo.
I'm trying to design a 2 column layout using divs. My left column size is fixed to 150 px. But right column is not fixed size, so I want it to extend to right boundary of the browser. I used width:auto and width:100% values in right column but they didn't work.
CSS :
html {
height:100%; width:100%
}
body {
color: #000040;
text-align: left;
padding:0;
margin:0;
height:100%;
width:100%
}
#header {
position:relative;
float:left;
background-color: #000053;
width: 100%;
height: 76px
}
#wrapper {
position:relative;
overflow:hidden;
width:100%;
height: 100%;
margin:0px auto;
padding:0;
background-color:Aqua
}
#container {
clear:left;
float:left;
overflow:hidden;
width:100%;
height:100%
}
#left_column {
position: relative;
float: left;
background-color:Fuchsia;
width: 150px;
overflow:hidden;
height:100%
}
#right_column {
position: relative;
float:left;
overflow:hidden;
background-color:Blue;
height: 100%;
width:auto }
HTML
<html>
<body>
<div id="wrapper">
<div id="header">
HEADER
</div>
<div id="container">
<div id="left_column">
LEFT COLUMN
</div>
<div id="right_column">
RIGHT COLUMN
</div>
</div>
</div>
</body>
</html>
I would remove all position statements and only put a float:left on the left column, not the right nor the container. Give the right column a margin-left:150px and it should work fine.
Except for the left-floated column, you can also remove the width:100% statements from the rest; when they're not floated, they'll be 100% wide automatically.
The overflow:hidden is only needed on the wrapper; at least if you are using it to have the div grow in height to accommodate the floats inside it.
change for the div right_column the position from relative to fixed, and width from auto to 100%. Also add left:150px;
With these changes you css for right_column will look like the following:
#right_column {
position: fixed;
left:150px;
float:left;
overflow:hidden;
background-color:Blue;
height: 100%;
width:100%; }
you can check it here http://jsbin.com/ejetu3