I want to create a layout of 3 columns. The center has a fixed width (e.g. 500px). The sidebars need to have a fixed position, so that their content remains always visible. This content has to be floated close to the middle column.
Here is what I came up with so far. Unfortunately, I couldn't fix the sidebars. The code is replicated below.
HTML:
<div class="wrap">
<div id="pixelLeft">
<div id="pixelLeftContent">
Column 1 has to be fixed, with liquid width.
It's content needs to be floated to left;
</div>
</div>
<div id="bannerCenter">
</div>
<div id="pixelRight">
<div id="pixelRightContent">
Column 2 has to be fixed, with liquid width.
It's content needs to be floated to right;
</div>
</div>
</div>
<div style="clear:both;"></div>
CSS:
*{
margin:0;
padding:0;
}
#bannerCenter {
background:#ddd;
width: 500px;
float:left;
height: 1000px;
}
#pixelLeft {
background:#999;
width: calc(50% - 250px);
float:left;
}
#pixedLeftContent {
width: 50%;
float:right;
}
#pixelRight {
background:#999;
width: calc(50% - 250px);
float:right;
}
#pixelRightContent {
width: 50%;
float:left;
}
#pixelLeft, #pixelRight {
height: 400px;
}
Try something like this, i dont think css supports % and px together... it may solve your problem..
Modify Your css like this:
#pixelLeft{
width: 50%;
float:left;
position: relative;
}
#pixelLeftContent{
background:#999;
float: right;
margin-right: 250px;
}
Related
Currently have 2 divs...left is full of content and right is a sidebar 300px wide. I'd like them to be side by side, left and right but can't seem to get it right. I need the left div to take up the whole screen less the 300px for the right div.
Is it possible to have the right div in the left divs right margin?
<div id="container">
<div id="left"></div>
<div id="right"></div>
</div>
#container {
width: 100%
}
#left {
float: left;
margin-right: 350px;
}
#right {
float: left;
width: 300px;
padding-left: 25px;
}
edit:
Can i also have the right side position: fixed?
Solutions below work, but when i make the right div position: fixed; the div is no longer to the right of the left div.
Change the right and left div order like:
<div id="container">
<div id="right"></div>
<div id="left"></div>
</div>
Remove the float:left from #left in your CSS and change #right to float:right
#container {
width: 100%
}
#left {
margin-right: 350px;
}
#right {
float: right;
width: 300px;
padding-left: 25px;
}
EDIT:
My solution should work with position: fixed;, just remember to add right:0 to the fixed div.
#container {
width: 100%
}
#left {
margin-right: 350px;
}
#right {
position: fixed;
right: 0;
width: 300px;
padding-left: 25px;
}
Change your markup to:
<div id="container">
<div id="right"></div>
<div id="left"></div>
</div>
And CSS to:
#left {
overflow: hidden;
}
#right {
float: right;
width: 300px;
padding-left: 25px;
}
The left div will automatically take up the whole space next to the floated 'sidebar'.
Instead of re-ordering the content, you could just add a width:100% and negative margin to the #left div.
http://jsfiddle.net/daCrosby/FGMGB/
HTML
<div id="container">
<div id="left">Left Col</div>
<div id="right">Right Col</div>
</div>
CSS
#container {
width: 100%
}
#left {
float: left;
width: 100%; /* full width of #container */
margin-right: -325px; /* #right's width + left & right padding & margin */
}
#right {
float: left;
width: 300px;
padding-left: 25px;
}
Edit
From your comment elsewhere here, you need #right to be position:fixed. This will take the element completely out of the stack of elements, so float is unnecessary (and wont work anyways). Instead, just set the fixed positioning and you're good to go.
Relevant CSS, using same HTML as above
#container2 {
width: 100%
}
#left2 {
width: 100%; /* full width of #container */
margin-right: -325px; /* #right's width + left & right padding & margin */
background:#ddd;
}
#right2 {
position:fixed;
right:8px;
top:28px; /* set the right and top to whatever positioning you need. */
width: 300px;
padding-left: 25px;
background:#444;
}
jsFiddle
Take a look at:
Creating Liquid Layouts with Negative Margins (http://alistapart.com/article/negativemargins)
The problem with some of the answers is that you may not want to re-order the content because you may want the ability to move the right div under the left div in a responsive design, which would get increasingly more difficult if we reorder the content. Unfortunately #DACrosby's answer can lead to some wicked overlap of the right div on top of left div's content.
My solution was to set a positive padding-right that matches the negative margin-right on the left div, and set box-sizing: border-box.
.container {
clear:both;
}
.left {
box-sizing: border-box;
float:left;
width: 100%;
margin-right: -325px;
padding-right: 325px;
background:#ddd;
}
.right {
box-sizing: border-box;
background:#666;
position:fixed;
right:0;
width: 300px;
}
This works with or without the position:fixed; right div.
jsFiddle
I have 3 divs in one row
<div id="left"></div>
<div id="middle"></div>
<div id="right"></div>
here's how its layed out
I need the middle div to stay a fix width, but the left and right divs to shrink in as the screen gets smaller, heres an example
how would I write out the css?
this is how I have it so far, and by the way the 3 divs are wrapped in another div#mid
#mid {
max-width: 100%;
min-height: 395px;
max-height: 395px;
position: relative;
background-color: #F00;
display: block;
}
#left {
min-width:35%;
min-height: 395px;
max-height: 395px;
background-color: #00F;
position:relative;
float: left;
}
#middle {
min-width:30%;
min-height: 395px;
max-height: 395px;
background-color: #3F0;
position:relative;
float: left;
}
#right {
min-width:35%;
min-height: 395px;
max-height: 395px;
margin:0;
padding:0;
background-color: #0FF;
position:relative;
float: left;
}
if anyone can help me out id really appreciate it, thanks in advance!
Here I've answered this question, you can do it like this : My Fiddle
<div class="container">
<div class="first"></div>
<div class="static"></div>
<div class="third"></div>
</div>
CSS
.container {
display:-webkit-box;
-webkit-box-orient:horizontal;
-webkit-box-align:stretch;
display:-moz-box;
-moz-box-orient:horizontal;
-moz-box-align:stretch;
display:box;
box-orient:horizontal;
box-align:stretch;
color: #ffffff;
}
div {
height: auto;
}
.first {
background-color: #546547;
}
.static {
background-color: #154d67;
width: 300px;
}
.third {
background-color: #c00000;
}
.first, .third {
-webkit-box-flex:1.0;
-moz-box-flex:1.0;
box-flex:1.0;
}
Its very simple give fixed width to the middle div like width:300px...Hope this will be useful...
Very Simple.
Float the three divs.
Set the display property to 'inline-block'.
Set the width attribute of middle div.
Set max width attribute of the left & right div.
Here is the HTML markup I have tested with:
<body>
<div id="left">LEFT CONTENT ... LEFT CONTENT ... LEFT CONTENT ... LEFT CONTENT</div>
<div id="middle"></div>
<div id="right">
RIGHT CONTENT ... RIGHT CONTENT ... RIGHT CONTENT ... RIGHT CONTENT
</div>
</body>
Here is a sample CSS:
#right,
#left {
background-color:green;
float:left;
display:inline-block;
max-width:20%;
min-height:20px;
}
#middle {
width: 60%;
float:left;
display:inline-block;
background-color:blue;
min-height:20px;
}
And here is the implementation: http://jsfiddle.net/3yEv3/
I want the left column to be 40px. I want the center column to be 50% of the remaining viewport and I want the right column to be the other 50% of the remaining viewport.
It should look something like this:
[LEFTCOLUMN][...CENTER COLUMN...][...RIGHT COLUMN....]
[...40px...][........50%........][........50%........]
The solution presented here (link) will not work for my case as the center column can become too collapsed on mobile devices.
Thanks!
I think this may work for you:
http://jsfiddle.net/KR9zj/
Essentially the trick is to float LEFTCOLUMN, and wrap both CENTERCOLUMN AND RIGHTCOLUMN in a wrapper with overflow: hidden.
Use display:table; and display:table-cell;. No need to struggle with float:x;.
HTML:
<div id='container'>
<div id='first'>a</div>
<div id='second' class='fifty'>b</div>
<div id='third' class='fifty'>c</div>
</div>
CSS:
#container { display:table; width:100%; }
#container > * { display:table-cell; }
#first { width:40px; min-width:40px; }
#container .fifty { width:50%; }
Live example: http://jsfiddle.net/j25wK/
Will this work?
Demo: http://jsfiddle.net/BVhCZ/
As you can see, the left is absolute, and "remaining" is one block div that containing two 50% floated children. Should work for any width >~ 40px
Code:
<div class="left">LEFT</div>
<div class="content">
<div class="content-left">CONTENT LEFT</div>
<div class="content-right">CONTENT RIGHT</div>
</div>
.left {
position: absolute;
top: 0;
left: 0;
width: 40px;
background-color: #ddd;
}
.content {
margin-left: 40px;
}
.content .content-left {
float: left;
width: 50%;
clear: none;
background-color: #fdd;
}
.content .content-right {
float: right;
width: 50%;
clear: none;
background-color: #ddf;
}
First, check out a working example of the layout I have:
http://jsfiddle.net/EPC8c/2/
What I'm trying to do is adding a top margin to this. Since I have most of this built on 100% height, things get a little weird when trying this: http://jsfiddle.net/EPC8c/1/ (fixed link)
The fluid layout now leaves the footer being pushed down past 0 or 100% of the page. This is probably working as intended, but I'm trying to find a solution to not cause this.
Any help with this would be amazing.
HTML
<div id="container">
<header></header>
<div id="content"></div>
<footer></footer>
</div>
CSS
html, body {
background: #ff3333;
margin:0;
padding:0;
height:100%;
}
#container {
position:relative;
background: #FFF;
margin: 0 auto;
width: 200px;
min-height:100%;
}
header {
height: 60px;
background: #888;
}
#content {
background: #FFF;
min-height: 200px;
padding-bottom: 60px; /*FOOTER HEIGHT*/
}
footer {
position:absolute;
bottom: 0;
width: 200px;
height: 60px;
background: blue;
}
Here's a solution, courtesy of this question: CSS 100% height with padding/margin
JSFiddle:
http://jsfiddle.net/EPC8c/5/
HTML:
<div id="wrapper">
<div id="container">
<header></header>
<div id="content">
</div>
<footer></footer>
</div>
</div>
CSS:
#wrapper {
display: block;
position:absolute;
height:auto;
bottom:0;
top:0;
left:0;
right:0;
margin-top:20px;
}
It's admittedly not the best solution and it relies on percentage margins, but one route would be to wrap it all in an absolutely positioned div with a percentage upper padding and a negative (equal) percentage bottom padding. Like this:
http://jsfiddle.net/EPC8c/3/
<div id="wrapper">
<div id="container">
<header></header>
<div id="content">
</div>
<footer></footer>
</div>
</div>
CSS:
#wrapper {
position: absolute;
width: 100%;
height: 90%;
padding-top: 10%;
padding-bottom: -10%;
}
I need help in centering one DIV withing a DIV.
I want to have one container DIV that is auto width to take up the whole width of the screen (lets call it headerContainer.
Within headerContainer, I want 3 more DIVs:
A Left DIV (400px wide)
A Center DIV (100px wide)
A right DIV (200px wide).
I want the center DIV directly in the middle of the screen. Right now I can only get it to center between the left and right DIV.
Thanks for any help.
CSS:
.leftDiv{
float: left;
width: 400px;
}
.rightDiv{
float: right;
width: 200px;
}
.centerDiv{
width: 100px;
margin: 0 auto;
}
HTML:
<div>
<div class="leftDiv">left</div>
<div class="rightDiv">right</div>
<div class="centerDiv">center</div>
</div>
DEMO:
Code: http://jsfiddle.net/Xxwrm/6/
Fullscreen: http://jsfiddle.net/Xxwrm/6/show
This works.
.headerContainer{
width:auto !important;
}
.leftDiv{
float:left;
width:400px;
}
.rightDiv{
float:right;
width:200px;
}
.centerDiv{
display:inline;
width:100px;
margin-left:auto;
margin-right:auto;
}
.
<div class="headerContainer">
<div class="leftDiv"></div>
<div class="centerDiv"></div>
<div class="rightDiv"></div>
</div>
What you could do is add another div at the end which makes both sides equal, and set visibility: hidden; (not display: none;); this way it would centre the middle div.
For example in this case you'd have one # 400px, another # 100px, another # 200px and another one, hidden, # 200px.
Regards,
Richard
<div class="headerContainer">
<div class="leftDiv">left</div>
<div class="rightDiv">right</div>
<div class="centerDiv">center</div>
</div>
This HTML with this CSS will work. I colored the DIV's to make it obvious.
.headerContainer{
width:auto;
}
.leftDiv{
float:left;
width:400px;
background:pink;
}
.centerDiv{
width:100px;
/*
margin-left:auto;
margin-right:auto;
*/
margin:0 auto;
background:cyan;
}
.rightDiv{
float:right;
width:200px;
background:lightgray;
}
However, if the screen is not 700px wide, you will get some wrapping.
Here is a fiddle for it, too: http://jsfiddle.net/johnpapa/9bN2p/
You can use a modern solution due the flex concept of css3.
.parent {
display: flex;
height: 300px;
/* Or whatever */
background-color: green;
}
.child {
width: 100px;
/* Or whatever */
height: 100px;
/* Or whatever */
margin: auto;
/* Magic! */
background-color: yellow;
}
<div class="parent">
<div class="child ">Div1</div>
</div>