I have been fiddling with this issue all day now. I need to create a 3 column design where the middle div has a fixed width and the left/right divs are dynamic (responsive to the width of page). For example:
#container {
float:left;
width:100%;
}
#left {
min-width: 200px;
width: 100%;
}
#middle {
width: 250px;
}
#right {
min-width: 200px;
width: 100%;
}
HTML:
<div id="container">
<div id="left">
Left column should expand with the width of the browser - with a min-width.
</div>
<div id="middle">
Middle column with fixed width.
</div>
<div id="right">
Right column should expand with the width of the browser - with a min-width.
</div>
</div>
I have created a fiddle for this: http://jsfiddle.net/2jGAe/
Can you help me solve this styling issue?
The key is to use :
#container > div {
display: table-cell;
}
with no width on the #left and #right divs. See demo.
Related
I am trying to add a div above my content div with the same width.
I would like it to only push down the content div, but it causes the sidebar div to move down as well.
<div id="container">
<div id="new-div">new div</div>
<div id="content">content</div>
<div id="sidebar">sidebar</div>
</div>
.
#container {
background: lightgrey;
width: 500px
}
#new-div {
background: darkred;
width: 300px
}
#content {
background: lightblue;
width: 300px;
height: 400px;
display: inline-block
}
#sidebar {
background: darkgreen;
width: 100px;
height: 400px;
float: right;
}
http://jsfiddle.net/zd9omqa7/2/
How can I avoid the sidebar div to move down? I would like it to always float in the right top corner.
The two easiest ways that spring to mind would be to either reorder the html so your sidebar comes first in the DOM:
http://jsfiddle.net/ctaylr/xxhdn1xb/1/
<div id="container">
<div id="sidebar">sidebar</div>
<div id="new-div">new div</div>
<div id="content">content</div>
</div>
or to use position absolute to brute-force move it to the top:
http://jsfiddle.net/ctaylr/warnjgp3/2/
(remember to position the container div relative for this to work)
Otherwise, you could look to wrap your left hand side "divs" in a container of its own.
Hope this helps!
What I'm attempting to do now, is creating a container (with floated elements) that adapts its width to the elements that fit..
The simplest example I can think of is this:
A container is filled with 300px * 300px floating divs. As long as the divs don't fill up a row, the width of the container (cleared both) is the same as the combined width of the divs, or 1 div = 300px, 2 divs = 600px and so on. However, if the divs don't fit on one row, they go on to the next and the width of the container remains at 100% even though the divs on the first row only take up (let's say) 95%.
Is there a pure CSS way of making that container no wider than its contents?
#main {
float: left;
background-color: #f00;
}
#main > :last-child:after {
clear: both;
}
.float {
width: 150px;
height: 150px;
float: left;
background-color: #00f;
}
<div id="main">
<div class="float"></div>
<div class="float"></div>
<div class="float"></div>
<div class="float"></div>
<div class="float"></div>
<div class="float"></div>
<div class="float"></div>
<div class="float"></div>
<div class="float"></div>
</div>
Here's a JSfiddle: http://jsfiddle.net/j9A6T/
Can you lose the red part to the right?
I have tried using the float/inline-block/table solutions on the container, but they won't work in this case.
Isn't it a case where a clearfix (to apply to your container div) would help?
.clearfix:after {
content: " "; /* Older browser do not support empty content */
visibility: hidden;
display: block;
height: 0;
clear: both;
}
More here : What is a clearfix?
I'm trying to implement solution similar to provided here:
https://stackoverflow.com/a/12242226
The problem with it (for me) is that it does not allow to restrict height of inner div.
So I've updated solution as follows:
<style type='text/css'>
html, body {
height: 400px;
width: 100%;
margin: 0;
}
.wrapper {
display: table;
height: 400px;
width: 100%;
background: yellow;
}
.component {
display: table-row;
background: gray;
}
.content {
display: table-cell; /* height is dynamic, and will expand... */
height: 100%; /* ...as content is added (won't scroll) */
background: turquoise;
}
.contentRel {
height: 100%;
background: blue;
position: relative;
}
.contentRemaining {
background: red;
position: absolute;
top:30px;
bottom:0;
left: 0;
right: 0;
overflow: auto;
}
</style>
<body>
<div class="wrapper">
<div class="component">
<h1>Component</h1>
<p>of variable height</p>
</div>
<div class="content">
<div class='contentRel'>
<div>100% Component Header</div>
<div class='contentRemaining'>
<div style='height:1000px'>
100% Component Content
</div>
</div>
</div>
</div>
<div class="component">
<h3>Other</h3>
<p>componet of variable height</p>
</div>
</div>
</body>
http://jsfiddle.net/UrcV7/
It works as I need in FF (height of contentRel div is set to 320px - height of wrapper div minus sum of heights of component divs), but doesn't work in IE: height of (contentRel div is set to 400px - same as height of wrapper div).
Does anybody know how to fix it?
Here is my problem description (maybe it is another solution for it):
I have an outer div with height set to some px values (wrapper div in example).
In that div I have several other divs which can be hidden dynamically by some JS code.
All divs except of 1 has some height. though it is unknown to me (component divs in example).
I want that one remaining div (content div in example) to:
a. Use all remaining height of wrapper div
b. Have a header of some predefined height (100% Component Header part in example above)
c. Have a child div with height "100% of content div" - "height of header" (100% Component Content in example above)
d. To not to be taller than "height of wrapper div minus sum of heights of component divs" (scrollbars are ok)
The following code has a DIV that needs to be positioned at the top of the container, another at the bottom and then the content needs to come through in the middle.
<div style="position:absolute; top:0; width:100%; height:40px"></div>
<div class="howto"></div>
<div style="position:absolute; bottom:0; width:100%; height:40px"></div>
So we don't know the height of the containing DIV. How without JS can the div with class howto have the height of the container DIV less the height of the absolute positioned div at the top and bottom so as to contain content between these 2 DIVs.
For what you wish to accomplish, this is one possible solution:
#tinkerbin: http://tinkerbin.com/QsaCPgR6
HTML:
<div class="container">
<div class="header"></div>
<div class="howto">
Has height set to auto. You may change that if you want to.
</div>
<div class="footer"></div>
</div>
CSS:
.container {
position: relative;
padding: 40px 0; /* top and bottom padding = .header and .footer padding*/
}
.header,
.footer {
position: absolute;
height: 40px;
width: 100%;
}
.header {
top: 0;
}
.footer {
bottom: 0;
}
.howto {
height: /*specifiy one if you wish to*/;
}
As far as I know there isn't a pure CSS way to do what you're trying to do without JS.
See this previous post on SA:
Make a div fill the height of the remaining screen space
How to achieve the following with CSS?
--------------------------------------------------
| DIV 1: 50px | DIV 2: FLUID | DIV 3: 50px |
--------------------------------------------------
I don't have an issue with a 2 columns layout having the right div fluid, but i can't figure out how to make the above.
Demo: http://jsfiddle.net/SKsmJ/
<div style="float:right;width:50px;"></div>
<div style="float:left;width:50px;"></div>
<div style="margin:0 55px;"></div>
It's not the nicest solution, but you could use nested divs, set the main div's width to whatever you want for your page's width and position the other two with float.
HTML:
<div id="main">
<div id="left">left</div>
<div id="right">right</div>
main
</div>
CSS:
div {
display: block;
}
#main {
width: 100%;
}
#left, #right {
width: 50px;
}
#left {
float: left;
}
#right {
float: right;
}
Here's a working example: http://jsfiddle.net/davehauser/6qVwR/
All you have to do is to float both the right and left div, making sure you're right div is the first in the HTML.
I edited the jsfiddle you provided : http://jsfiddle.net/AsKGL/
You just need to float: left all divs, specifying width:50px for the first and last div.
Here's a super basic jsFiddle: http://jsfiddle.net/Simo990/V3PtW/1