I have the following setup for a 3 column layout:
#column-menu {
float: left;
width: 25%;
}
#column-main {
float: right;
width: 55%;
}
#column-side {
float: left;
width: 20%;
}
This code works with the following html:
<div id="column-side">my right side content</div>
<div id="column-main">my main content</div>
<div id="column-menu">my sub menu</div>
I'm not committed to using floats. It just so happens that it works with the above structure, except for when nothing is in column-side. In that case I would like column-main to cover the additional width and not be constrained to 55%. Is there a way to build that kind of flexibility with CSS alone?
If you want to do it with floats, you will have to reorder your elements:
.column-side {
float: left;
width: 20%;
background: #00ffff;
}
.column-menu {
float: left;
width: 25%;
background: #00ff00;
}
.column-main {
overflow: hidden;
background: #ffff00;
}
<div class="column-side">Side</div>
<div class="column-menu">Menu</div>
<div class="column-main">Main</div>
<hr />
<div class="column-side"></div>
<div class="column-menu">Menu</div>
<div class="column-main">Main</div>
then in that case you want something like this:
if you remove <div id="column-menu" class="align">my sub menu</div> you will see how it works with proper fluidity.
.wrapper {
width: 100%;
display: table;
table-layout: fixed;
}
.align {
display: table-cell;
vertical-align: top;
width: 100%;
}
#column-menu {
width: 25%;
background: red;
}
#column-main {
width: 55%;
background: blue;
}
#column-side {
width: 25%;
background: green;
}
<div class="wrapper">
<div id="column-side" class="align">my right side content</div>
<div id="column-main" class="align">my main content</div>
<div id="column-menu" class="align">my sub menu</div>
</div>
A quick explanation of what's going on here:
you are using table-layout:fixed; it will automatically equally proportion the child elements with the relative css rule which in this case is display:table-cell;
Now because we don't want it to be equal we set the percentages but because of the fixed property when a div is removed the remaining two div's will just span proportionality and auto calculate what there widths should be to still take up the full width of the container.
Related
I need to put a sidebar on the left of the content.
I had this html:
<div class="sidebar"></div>
<div class="content"></div>
and I solved using:
.sidebar{
width: 280px;
float: left
}
.sidebar + .content{
margin-left: 300px
}
For this example: https://jsfiddle.net/VixedS/fcx2aLLa/
But now my that .content comes before the .sidebar,
<div class="content"></div>
<div class="sidebar"></div>
how can I obtain the same result just using css?
I don't want to loose the remaining space of the body for the width of .content with or without .sidebar.
So please remember that before saying to float the .content to right. Also, I don't know which page has a .sidebar.
This solution is very powerfull. Works for every browser, any device. Also a great way for responsive design and for a third column.
Update:
.container {
overflow:auto;
}
.sidebar {
width: 280px;
float: left;
background: #EEE;
margin-left: -100%;
}
.content {
float: left;
width: 100%;
}
.center {
margin-left: 280px;
}
.container > div:only-child > div.center {
margin-left: 0;
}
<div class="container">
<div class="content">
<div class="center">
Spaghetti
</div>
</div>
<div class="sidebar">
Pizza
<br /> Hobby
</div>
</div>
Do following way. Use float:right to sidebar and display:table to it's parent.
body {
display: table;
}
.content {
float: right;
}
.sidebar{
width: 280px;
float: left;
background:#EEE; // just for this example
}
.sidebar + .content{
margin-left: 300px
}
<div class="content">Spaghetti</div>
<div class="sidebar">Pizza <br /> Hobby</div>
Flexbox...means you don't have to use floats...and you can re-order the elements as you require.
Support is IE10 and up.
body {
display: flex;
}
.sidebar {
width: 280px;
background: #aaa; // just for this example
order: 0;
}
.content {
flex: 1;
order: 1;
background: plum;
}
<div class="content">
Spaghetti</div>
<div class="sidebar">Pizza
<br />Hobby</div>
I'm trying to use CSS calc() to build an App Style layout with a footer at the bottom.
The main CSS players:
.content-container {
height: calc(100% - 110px);
background-color: red;
overflow: hidden;
}
.left, .right {
float: left;
height: 100%;
}
.left {
width: 70%;
background-color: blue;
}
.right {
width: 30%;
background-color: yellow;
}
.right-content {
overflow: auto;
height: 100%;
margin-bottom: 30px;
}
Here's a quick overview of the HTML:
<div class="content-container">
<div class="left">
<h1>left</h1>
</div>
<div class="right">
<div class="right-title">
TITLE OF THE SECTION
</div>
<div class="right-content">
<div class="group">
</div>
</div>
</div>
</div>
<div class="footer"></div>
Please view the full example here:
http://codepen.io/woocas/pen/MwyBGd?editors=110
I'm trying to make the overflow in the .right div (the yellow one) take the height of the .content-container.
But as you can see in the example, the scrollbar goes beyond the space allocated to it by content-container. It's behind the footer.
Any help would be greatly appreciated.
Have you tried setting the CSS heights in your right column to percentage values since they're embedded in a container they'll always present in a fit manner?
.right-title {
background-color: gray;
height: 65%;
}
.right-content {
overflow: auto;
height: 35%;
}
You could do another calc on the .right height and add a margin-bottom, so that .right will not go beyond the footer, but the whole thing seems to be a bit over-complicated.
.right {
width: 30%;
background-color: yellow;
height: calc(100% - 90px);
padding-bottom: 90px;
}
I have 3 divs in wrapper. I want 2 of them to stick to top-left and they need to be under each other. Third div needs to stick to top-right, but doesn't stick to top.
This is how I tried to do it but failed: http://jsfiddle.net/TZ82X/
<div id="wrapper">
<div id="logo">Logo</div>
<div id="motto">Motto</div>
<div id="nav">Navigation</div>
</div>
CSS:
#wrapper {
background: #CCC;
width: 500px;
height: 250px;
margin: auto;
}
#logo {
background: tomato;
width: 300px;
height: 20px;
float: left;
}
#motto {
background: sienna;
width: 300px;
height: 20px;
float: left;
clear: left;
}
#nav {
background: seagreen;
width: 200px;
height: 40px;
float: right;
}
This is 1st fix with rearranging of divs in .html: http://jsfiddle.net/KJG9q/
<div id="wrapper">
<div id="nav">Navigation</div>
<div id="logo">Logo</div>
<div id="motto">Motto</div>
</div>
This is 2nd fix with another container div: http://jsfiddle.net/x98Mf/
<div id="wrapper">
<div id="logo-motto-container">
<div id="logo">Logo</div>
<div id="motto">Motto</div>
</div>
<div id="nav">Navigation</div>
</div>
CSS:
#logo-motto-container {
float: left;
I don't want to rearrange elements in .html because I want them arranged properly for styling for mobile, I could go with another wrapper div but I want to know why the first method didn't work and if is there a fix for it without messing in .html and keeping template flexible (without position: relative)?
I have modified your fiddles so as to give you what you want to do.
The following link is the modified version of your first fix fiddle. I have just played with the css properties and not moved any of your html div's as you wanted.
Fiddle Link
#nav {
background: seagreen;
width: 100%x;
height: 40px;
}
Remove float: right; from #nav.
#nav {
background: seagreen;
width: 200px;
height: 40px;
}
#nav {
background: seagreen;
width: 200px;
height: 40px;
float: right;
position: absolute;
}
I didn't find an answer for this specific case of mine, so I decided to ask a new question. I want to have 2 DIVs on the left side of the page (with a fixed width) and a single DIV on the right side, occupying the rest of the page width. Also the single DIV on the right should have its independent height (when its height is increased it shouldn't affect the height or position of the DIVs on the left). Something like this is what I want:
This is the HTML code:
<body>
<div class="div1">Div1</div>
<div class="div3">Div3</div>
<div class="div2">Div2</div>
</body>
This is the CSS I have right now:
div.div1 {
float: left;
height: 400px;
margin-right: 10px;
width: 200px;
}
div.div3 {
height: 425px;
overflow: hidden;
}
div.div2 {
clear: left;
float: left;
height: 15px;
margin-top: 10px;
}
The only problem is that Div2 top position is affected by the height of Div3 and I get something like this:
Try this:
<html>
<head>
<style>
div.div1 {
float: left;
height: 400px;
margin-right: 10px;
width: 200px;
background-color: blue;
}
div.div2 {
clear: left;
float: left;
height: 15px;
width: 200px;
margin-top: 10px;
background-color: red;
}
div.div3 {
height: 425px;
overflow: hidden;
background-color: green;
}
</style>
</head>
<body>
<div class="div1">Div1</div>
<div class="div2">Div2</div>
<div class="div3">Div3</div>
</body>
</html>
Once I re-ordered the Divs and added a width for Div 2 it works fine
https://jsfiddle.net/6g7qx26b/
This also works if you replace the css height properties with min-height properties, allowing for greater flexibility. Widths may also be specified in percentages
now you can use the right content with overflow:hidden and not conflicting with the left divs.
Check this:
http://jsfiddle.net/6UyTr/1/
div.left-content { margin-right: 10px; overflow: hidden; width: 200px; float: left; }
Check it on http://jsfiddle.net/cz2fP/
<div style="float:left;">
<div class="div1">Div1</div>
<div class="div2">Div2</div>
</div>
<div class="div3">Div3</div>
Grouping the left div element by another div element.
div.div1 {
height: 400px;
margin-right: 10px;
width: 200px;
background: red;
float: left;
}
div.div3 {
height: 15px;
margin-top: 10px;
margin-right: 10px;
background: green;
clear: both;
width: 200px;
}
div.div2 {
height: 425px;
overflow: hidden;
background: blue;
float: left;
width: 200px;
}
<div style="float:left;">
<div class="div1">Div1</div>
<div class="div2">Div2</div>
</div>
<div class="div3">Div3</div>
And see this link http://jsfiddle.net/bipin_kumar/cz2fP/3/
<style>
div.left{
float: left;
}
.main{
width : 100%;
}
.clear{
clear : both;
}
div.div1, div.div2 {
margin-right: 10px;
width: 200px;
background: red;
}
div.div1 {
height: 400px;
}
</style>
<body>
<div class="main">
<div class="left">
<div class="div1">Div1</div>
<div class="div2">Div2</div>
</div>
<div class="div3">Div3</div>
<div class="clear"></div>
</div>
</body>
http://jsfiddle.net/rkpatel/qd6Af/1/
I needed something similar, just mirrored (1 div left, 2 divs right) and I couldn't work it out. A few Google searches later, I found a website which easily allows you to create a grid, assign number of rows/columns to differently named divs and it even gives you the HTML/CSS code to just copy and paste it. I didn't know about this and wasted a good hour on trying various other ways, so if you didn't know about this website yet, here it is.
Sorry for replying to such an old thread, I just want to help people.
Try this
<body>
<div class="left">
<div class="div1">Div1</div>
<div class="div2">Div2</div>
</div>
<div class="div3">Div3</div>
</body>
DEMO
<div class="main">
<div class="div1">
<div class="div2"></div>
<div class=="div3"></div>
</div>
<div class="div4"></div>
</div>
and in css use min-height property
.div1 {
float:left;
}
.div4 {
float:right;
}
.main {
min-height:200px;
}
Given the following
#container {
border:solid 3px red;
}
#left {
float: left;
background-color: lightblue;
height: 300px;
}
#right {
float: left;
background-color: coral;
height: 300px;
}
<div id='container'>
<div id='left'>Left content</div>
<div id='right'>Right content</div>
</div>
(See: http://jsfiddle.net/ericjohannsen/JCPEH/1/)
Why does container apparently not have any area (that is, it has a zero height, plus the border)? I naively expected it to be as tall as the child divs that it contains.
What is the proper way to set this up so that the div containing the two children is as tall as the children?
You need to clear your floats. You can do this via a clearfix class:
.clearfix:before,
.clearfix:after {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
#container {
border:solid 3px red;
}
#left {
float: left;
background-color: lightblue;
height: 300px;
}
#right {
float: left;
background-color: coral;
height: 300px;
}
<div id='container' class="clearfix">
<div id='left'>Left content</div>
<div id='right'>Right content</div>
</div>
or a clearing element:
.clear {
clear:both;
}
#container {
border:solid 3px red;
}
#left {
float: left;
background-color: lightblue;
height: 300px;
}
#right {
float: left;
background-color: coral;
height: 300px;
}
<div id='container'>
<div id='left'>Left content</div>
<div id='right'>Right content</div>
<div class="clear"><!-- --></div>
</div>
Updated Fiddle:
http://jsfiddle.net/JCPEH/5/
This is because floats are not part of the layout until they are cleared.
A float like some other "commands" (like position relative/absolute/fix) removes the element from the normal rendering flow.
One result, it is no longer affecting it's parent element way of rendering.
You can enlighten yourself here
before closing the big div add a <div id="clear"></div> and in css add #clear{clear:both;}
Set the position to absolute for the container, that fixes the problem. http://jsbin.com/ifojug/1/ jsfiddle doesnt work on my browser for some reason