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;
}
}
Related
how could i do vertical-align:bottom for some divs that have float:left?
you can see the source here: http://jsfiddle.net/Lb1su4w2/
this is what i have: (every color is a different div)
this is what i want to have:
Vertical align only works with inline block elements, floated elements ignore the vertical align property.
Update the box class with the following:
.box {
display: inline-block;
vertical-align: bottom;
width:80px;
}
I would make them all inline block elements and remove the whitespace with one of these techniques.
Updated fiddle: http://jsfiddle.net/9rcnLb8n/
Alternatively you could use flexbox with the align-self: flex-end; property.
HTML:
<div id='wrapper'>
<div id='a' class='box'>aa</div>
<div id='b' class='box'>bb</div>
<div id='c' class='box'>cc</div>
<div id='d' class='box'>dd</div>
</div>
CSS:
.box {
width:80px;
vertical-align: bottom;
display: inline-block;
}
#a {
background-color:red;
height:200px;
}
#b {
background-color:green;
height:100px;
}
#c {
background-color:yellow;
height:150px;
}
#d {
background-color:blue;
height:300px;
}
#wrapper {
border: 1px solid pink;
display: table;
}
In this case don't use:
float: left;
Instead use:
display: inline-block;
Check out my fiddle:
http://jsfiddle.net/Lb1su4w2/6/
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 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.
I have searched high and low for days and trying to get two divs side by side (50% wide each) and a second div below at 100% wide...also the two top divs need to change with responsive vieing. i.e right div falls under the left div when screen size is at say 960px wide.
I have tried this code, but the right div displays smaller when you start to reduce the browser size.
I'm sure I have this all wrong, but it's a learning stage for me, so sorry for a basic question! Any help would be so great!!!
Sorry...I can post an image to explain, but to help clear it up, I need in one row, two divs side by side (50% wide each) and in row 2, 1 div that takes up 100% width.
OK! I can add an image now of what I need to achieve! Images 1, 2, 3 will be different sizes along with the amount of text below the image. The layout (example) image is not to scale, and on the site will need a clear background (no colour) The background colours are just to show different the divs in the example.
And this is how it should look in responsive...
HTML:
<div class="custom_div">
<div id="one">one</div>
<div id="two">two</div>
<div id="three">three</div>
</div>
CSS:
.custom_div {
overflow:hidden;
}
.custom_div div {
min-height: 100%;
padding: 10px;
text-align: center;
}
#one {
background-color: gray;
float:left;
margin-right:0px;
width:50%;
}
#two {
background-color: white;
overflow:hidden;
margin-right: 20px;
margin: 1px;
width:auto;
min-height: 50%;
}
#three {
background-color: yellow;
margin-right:auto;
margin-left:auto;
width: 100%;
}
#media screen and (max-width: 600px) {
#one {
float: none;
margin-right:0;
width:auto;
}
}
UPDATE:
Demo Fiddle
The only foolproof way to do this to ensure correct sizing on differing levels of content:
HTML
<div class='table'>
<div class='cell'></div>
<div class='cell'></div>
<div class='caption'></div>
</div>
CSS
.table {
display:table;
width:100%;
}
.cell {
display:table-cell;
}
.caption {
display:table-caption;
caption-side:bottom;
}
.cell, .caption {
height:20px;
border:1px solid black;
}
#media screen and (max-width: 960px) {
.table .cell, .caption {
display:block;
}
}
Original Answer
How about the below?
Demo Fiddle
HTML
<div class="left">left</div>
<div class="right">right</div>
<div class="full">content</div>
CSS
div {
border:1px solid black;
box-sizing:border-box;.
-moz-box-sizing:border-box;
}
.left, .right {
width:50%;
}
.left {
float:left;
}
.right {
float:right;
}
#media screen and (max-width: 600px) {
.left, .right {
width:auto;
float:none;
}
}
You can try below code:
Working Demo
html, body{height:100%;}
.custom_div{width:100%;}
.custom_div div {
background:#ccc;
box-sizing:border-box;
-moz-box-sizing:border-box;
}
#one, #two {
width:50%;
float:left;
height:100%;
}
.clearfix{clear:both; display:block;}
#media screen and (max-width: 960px) {
#one, #two {
width:auto;
float:none;
}
}
Checkout the Updated Fiddle : http://jsfiddle.net/PEvLt/3/
I've removed unnecessary properties.
The problem was with the padding and margins.
The thing you should add is always use BOX-SIZING Property.
It'll help you when you are using padding with the widths/heights defined in %
More about Box-Sizing.
http://css-tricks.com/box-sizing/
UPDATE : You need to wrap the first column into one single div or need to clear floats after first 2 columns to avoid overlapping of the third column.
HTML :
<div class="first_two">
<div id="one">
<img src="http://lorempixel.com/500/200/" width="100%"/>
</div>
<div id="two">
<img src="http://lorempixel.com/300/200/" width="100%"/>
</div>
<div class="clear"></div>
</div>
<div id="three">three</div>
CSS :
*{
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box;
}
.first_two {
background:#3498db;
overflow:hidden;
}
#one {
float:left;
width:50%;
height:100%;
}
#two {
width:50%;
float:left;
height:100%;
}
#three {
background-color:#8e44ad;
width: 100%;
}
.clear{
clear:both;
}
#media screen and (max-width: 600px) {
#one,#two {
width:100%;
}
}
you can set the width of body tag using javascript
<script>
document.getElementsByTagName("body")[0].style.width=screen.width+"px";
</script>
I am trying to achieve the following in a two column float css design
My css for the two is this:
.div1 {
width: 25%;
float:left;
}
.div2 {
width: 75%;
float: right;
}
.container {
width:960px;
}
#media screen and (max-width: 320px) {
.div1, .div2 {
width: 100%;
display: block;
float: none;
clear: both;
}
.container {
width: 100%;
}
}
my html is this:
...
<div class="container">
<div class="div1">
... content inside
</div>
<div class="div2">
<img src="photo_loc"/>
</div>
</div>
I have Div I and Div II. Div I is 25% width and Div II is 75% width. When I go to 320px (iphone portrait) using responsive design Div II goes below Div I, which I assume is the normal process.
What I am trying to do is have Div II above Div I using floats, how can this be achieved through css?
Working Fiddle
.div1 {
width: 25%;
float:left;
background:orange;
}
.div2 {
width:75%;
float: right;
background:red;
}
#media screen and (max-width: 320px) {
.div1, .div2 {
width: 100%;
display: block;
float: none;
clear: both;
}
.div1{
position:relative;
top:100px;
}
.div2{
position:absolute;
top:0;
height:100px;
}
}
Swap the HTML positions of div1 and div2 around.
It may not be semantically correct in terms of how the page should be layed out but it will still work.
Keep the CSS the same and have your html like this
<div class="div2">Text for box 2</div>
<div class="div1">Text for box 1</div>
Demo: http://jsfiddle.net/u3Ng3/1/