2 column div layout: right column with fixed width, left fluid
I have the same problem, only in the code box on the right goes first, second left
#container {
width: 100%;
max-width: 1400px;
min-width: 1024px;
margin: 0 auto;
text-align: left;
}
/*left block */
.block_side {
width: 236px;
height: 400px;
float: left;
margin: 19px 0 0 30px;
}
/* Right block */
.content_side {
float: none;
overflow: hidden;
width: auto;
margin: 0 30px 0 0;
}
content_side be right and left block_side, but they must have the document in that order
<div id="container">
<div class="content_side">
{CONTENT}
</div>
<div class="block_side">
{BLOCK}
</div>
</div>
"content_side" replaces a unit that should be left, occupies the entire available width
Demo in Jsfiddle
change #containet to #container and text-align: left; to text-align: center;
#container {
width: 100%;
max-width: 1400px;
min-width: 1024px;
margin: 0 auto;
text-align: center;
}
Demo in jsfiddle
Change css rule float:none to float:right would do the trick if I understand your question correctly.
.content_side {
float: right;
}
CSS
#container {
width: 100%;
max-width: 1400px;
min-width: 1024px;
margin: 0 auto;
text-align: left;
position:relative;
height:auto;
}
/*left block */
.block_side {
width: 256px;
height: 400px;
float: left;
margin: 0px 0 0 30px;
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box; /* Opera/IE 8+ */
background-color:green;
}
/* Right block */
.content_side {
float: right;
width: 738px;
margin: 0;
height:400px;
overflow:auto;
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box; /* Opera/IE 8+ */
background-color:red;
}
HTML
<div id="container">
<div class="block_side">
{BLOCK}
</div>
<div class="content_side">
{CONTENT}
</div>
</div>
You need to float:left or float:right your blocks (side and content).
DEMO HERE
More about box-sizing trick here: http://css-tricks.com/box-sizing/
Related
At the top level of my website layout are 4 div tags.
The first one is a full width header section, with css:
#header {
margin-top: 0px;
height: 70px;
border: 4px double rgb(255,255,255);
border-radius: 20px;
background: rgb(88,150,183) no-repeat fixed left top;
padding: 0px;
}
At the bottom is a full width footer:
#footer {
clear: both;
margin: 0px;
color:#cdcdcd;
padding: 10px;
text-align: center;
border: 4px double rgb(88,150,183);
border-radius: 20px;
}
On the left is my main menu section:
#categories {
float:left;
width:150px;
border: 4px double rgb(88,150,183);
border-radius: 20px;
}
All of those 3 elements work fine. They're in the right place and that doesn't change whatever screen resolution the user has on their monitor, or whether they view it on not maximum screen size.
My problem is with the main element of the page - where all the interesting stuff is. It's directly to the right of the menu div - or rather, it should be. My css is:
#main {
float:right;
min-height: 440px;
width: 80%;
margin-bottom: 20px;
padding:20px;
border: 4px double rgb(88,150,183);
border-radius: 20px;
}
width 80% works OK for most of my users, but for those with less resolution, the main element shifts below the menu, which is ghastly.
What I would ideally like is for the width set in the css #main to be something like (100% - 170px), thus leaving a nice margin between the menu and the main bit at all times and never pushing it below the menu. However, css standards don't fulfil that desire yet!
Could someone suggest how I amend my css to give me a nice clean page that's clean for all my users? Or do I need to go back to setting out my page using tables?
Using CSS3 flex
* { box-sizing: border-box; margin: 0; }
#parent{
display: flex;
}
#aside{
width: 170px; /* You, be fixed to 170 */
background: #1CEA6E;
padding: 24px;
}
#main{
flex: 1; /* You... fill the remaining space */
background: #C0FFEE;
padding: 24px;
}
<div id="parent">
<div id="aside">Aside</div>
<div id="main">Main</div>
</div>
Using CSS3 calc
width: calc(100% - 170px);
Example:
* { box-sizing: border-box; margin: 0; }
#aside {
background: #1CEA6E;
width: 170px;
float: left;
padding: 24px;
}
#main {
background: #C0FFEE;
width: calc(100% - 170px);
float: left;
padding: 24px;
}
<div id="aside">Aside</div>
<div id="main">Main</div>
Using float: left; and overflow
* { box-sizing: border-box; margin: 0; }
#aside{
width: 170px; /* You, be fixed to 170 */
float: left; /* and floated to the left */
padding: 24px;
background: #1CEA6E;
}
#main {
background: #C0FFEE;
padding: 24px;
overflow: auto; /* don't collapse spaces */
/* or you could use a .clearfix class (Google for it) */
}
<div id="aside">Aside</div>
<div id="main">Main</div>
Using style display: table;
* { box-sizing: border-box; margin: 0; }
#parent{
display: table;
border-collapse: collapse;
width: 100%;
}
#parent > div {
display: table-cell;
}
#aside{
width: 170px; /* You, be fixed to 170 */
background: #1CEA6E;
padding: 24px;
}
#main{
background: #C0FFEE;
padding: 24px;
}
<div id="parent">
<div id="aside">Aside</div>
<div id="main">Main</div>
</div>
Is this what you are looking for? You don't need any css3
Dont need any css3
.wrapper {
width: 800px;
height: 800px;
background-color: blue;
}
.content {
width: auto;
height: 100%;
background-color: yellow;
}
.menu {
width: 170px;
height: 100%;
float: left;
background-color: red;
}
<div class="wrapper">
<div class="menu">Menu</div>
<div class="content">
Aside
</div>
</div>
You can use 'calc' function supported by all modern browsers and IE9+, or switch to flexbox (supported by IE11+)
See this pen: https://codepen.io/neutrico/pen/MyXmxa
width: calc(100% - 170px);
Keep in mind that all borders matter unless you set 'box-sizing' to 'border-box' (or just remove these borders and apply them on child elements).
With the padding commented out as shown, the website works like I'd expect (2 div columns next to each other.
However, when I add padding, the #right div shifts downwards. How would I make it work as intended with padding?
HTML: Two divs contained directly in body
CSS:
#left {
background-color: green;
float: left;
margin-top: 0px;
width: 70%;
}
#right {
background-color: blue;
float: right;
margin-top: 0px;
width: 30%;
}
#left, #right {
//padding: 10px;
display: inline-block;
height: 800px;
}
add
box-sizing: border-box;
to your divs.
If you don't the padding is added outside the div width (or height).. same as borders
Edited: and
-webkit-box-sizing: border-box; -moz-box-sizing: border-box;
for a bit more browser compatibility
if you are using css3 , you can use box-sizing: border-box;
else, you can have another child div and apply padding to the child div instead of the parent div
#left {
background-color: green;
float: left;
margin-top: 0px;
width: 70%;
}
#right {
background-color: blue;
float: right;
margin-top: 0px;
width: 30%;
}
#left, #right {
padding: 10px;
display: inline-block;
height: 800px;
color:#fff;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
}
<div id="left"> left </div>
<div id="right"> right </div>
So I have a site with a simple two DIV panes: a content area left and a fixed 300px menu right, both of them going to a max of 1200px. I want users to be able to resize the window and have the LEFT pane shrink with the right menu staying fixed. But right now I can't find any way to do this, everything looks good at max size, but the left pane doesn't shrink if I resize the window, instead the right menu just wraps to the bottom of the screen. This would be easy with a left menu but the menu is on the right. Here is what I have so far:
#main
{
max-width: 1200px;
margin-right: auto;
margin-left: auto;
margin-top: 0;
display: block;
padding: 0;
}
#left
{
max-width: 890px;
float: left;
padding-right: 10px;
}
#right
{
width: 290px;
top: 0;
float: right;
padding-right: 10px;
padding-left: 10px;
}
you can use CSS calc() to adjust the width of the left container.
OPTION 1 FIDDLE
HTML
<div id="main">
<div id="left"></div>
<div id="right"></div>
</div>
CSS
#main{
width: 100%; //set to 100% since you're capping it at 1200 anyways
max-width: 1200px;
/* margin-right: auto;
margin-left: auto;
margin-top: 0; */ condense these to the following:
margin: 0 auto;
/*display: block;*/ already a block element so not necessary
padding: 0;
overflow: hidden; //add to correct floating elements
}
#left{
background: red; //just for my test
height: 100px; //just for my test
width: calc(100% - 300px); //readjusts based on screen size
float: left;
padding-right: 10px;
-moz-box-sizing: border-box; //if you use padding add these lines to fix issue of padding adding to width
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
#right{
background: black; //just for my test
height: 100px; //just for my test
width: 300px;
/*top: 0;*/ //dont need, not doing anything
float: right;
/*padding-right: 10px;
padding-left: 10px;*/ //can condense to following:
padding: 0 10px;
-moz-box-sizing: border-box; //see padding explanation above
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
OR
If you are worried about older browsers you can do this with display: table and display: table-cell like so:
OPTION 2 FIDDLE
CSS
#main{
width: 100%;
max-width: 1200px;
margin: 0 auto;
display: block;
padding: 0;
display: table; //add
table-layout: fixed; //add
}
#left{
display: table-cell; //use instead of float
background: red;
height: 100px;
padding-right: 10px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
#right{
display: table-cell; //use instead of float
background: black;
height: 100px;
width: 300px;
padding: 0 10px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
Instead of floating the divs, try display: inline-block on the left and right panes, or CSS3 flexbox (depends on how far back you support legacy browsers).
Flexbox example: http://jsfiddle.net/571k3gx2/
I want to put three divs in order as following: input, break, ouput. And thier parent div is the container. I am facing problem in applying the box-sizing for these divs, here is my css:
html {
border: groove 8px red;
margin: 20px;
}
.container {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
width: 100%;
height:75%;
}
.container .input {
width: 49%;
height: 100%;
border: solid 2px red;
float: left;
}
.container .break {
width: 2%;
height: 100%;
background: blue;
float: left;
}
.container .output {
width: 49%;
height: 100%;
border: solid 2px green;
float: right;
}
You have to apply box-sizing to the children as well:
.container > * {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
CSS's border-box property doesn't take into account margins. You'll need to set margin of 0 and adjust padding accordingly, but this may be undesired if you're using borders. You can try using percentages for margin so they (widths plus margins) add up to 100%. Also make sure that the child divs are inheriting box-sizing; you may need to define that specifically. I usually set this in CSS:
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
Lastly, get rid of that .break div. Use margins instead.
Is your output div dropping below your input and break divs? That's because your border pixels are being added onto your widths.
49% + 2% + 49% + 8px of borders (2 on each side of input and 2 more on each side of output) > 100%
You'll have to try different things to get it to work, but dropping to 48% or even 45% might work. Since your area already floating left & right the extra space will just go in the middle.
this simple three-column layout DEMO
HTML
<div class="header">header</div>
<div class="layout">
<div class="col1">column 1</div>
<div class="col2">column 2</div>
<div class="col3">clolumn 3</div>
</div>
<div class="footer">footer</div>
CSS
.header, .footer { background: #D5BAE4; }
.layout { overflow: hidden; }
.layout DIV { float: left; }
.col1 { background: #C7E3E4; width: 20%; }
.col2 { background: #E0D2C7; width: 60%; }
.col3 { background: #ECD5DE; width: 20%; }
try this (compliments of _s). when you give it a % based width and then a px based border the default is to add them together, this should fix that.
*,
*:before,
*:after { /* apply a natural box layout model to all elements; see http://www.paulirish.com/2012/box-sizing-border-box-ftw/ */
-webkit-box-sizing: border-box; /* Not needed for modern webkit but still used by Blackberry Browser 7.0; see http://caniuse.com/#search=box-sizing */
-moz-box-sizing: border-box; /* Still needed for Firefox 28; see http://caniuse.com/#search=box-sizing */
box-sizing: border-box;
}
LIVE DEMO
HTML
<div class="container">
<div class="input">
</div>
<div class="break">
</div>
<div class="output">
</div>
</div>
CSS
html {
border: groove 8px red;
margin: 20px;
}
.container {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
width: 100%;
height:75%;
}
.container div{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.container .input {
width: 49%;
height: 100%;
border: solid 2px red;
float: left;
}
.container .break {
width: 2%;
height: 100%;
background: blue;
float: left;
}
.container .output {
width: 49%;
height: 100%;
border: solid 2px green;
float: right;
}
Problem
I have set my CSS with;
*, *:before, *:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
margin:0;
padding:0
}
Since doing so though i have inconsistencies with the height of a div that has a set height, across different browsers.
Div's CSS in question
.content.one /*inquiry form*/ {
position: absolute;
float: left;
display: none;
top: 50px;
height: 615px;
left: -255px;
width: 960px;
z-index: 5;
padding-left: 50px;
padding-right: 50px;
padding-top: 5px;
padding-bottom: 10px;
background-color: #000000;
}
You have to use non-standart properties to use (sad but code will become invalid, because of them :()
-moz-box-sizing: border-box; /* Firefox */
-webkit-box-sizing: border-box; /* Safari, Chrome */
So full style will be:
div {
width: 300px;
background: #ccc;
padding: 20px;
-moz-box-sizing: border-box; /* Firefox */
-webkit-box-sizing: border-box; /* Safari, Chrome */
box-sizing: border-box; /* ie, opera */
}
Now div will be 300px width with all margins and paddings.
One cons is box-sizing property doesn't work in IE6 and IE7.
You can use nested layers instead:
Html:
<div class="block">
<div>I have 100% width</div>
</div>
Css:
.block {
width: 150;
}
.block div {
background: #fc0;
margin: 10px;
padding: 20px;
border: 1px solid #000;
}
Source: http://htmlbook.ru/samlayout/blochnaya-verstka/blochnaya-model