I have a main div that contains two other divs. I need that the first one must have the same height of the parent div. The parent div height is not specified in CSS.
Here's an example: http://jsfiddle.net/x8dhnh4L/
The pink div must expand to the full height of the parent (red border).
One solution I tried is using display:flex, but it's not IE-friendly (I need a IE8+ compatibility). Plus I'd like to achieve this with CSS only, so I'm avoiding JS.
You could try using a table layout:
set display:table on the parent
set display:table-cell to the childs that need the same height
#container {
position: relative;
width:600px;
border: 1px solid red;
display:table;
}
#content {
display: table-cell;
background-color:pink;
width:400px;
}
#side-bar {
display:table-cell;
background-color:yellow;
width:170px;
padding-left:25px;
vertical-align: top;
}
here's a working fiddle:
http://jsfiddle.net/x8dhnh4L/2/
As noted in the comments, margins do not work in elements with display:table-cell. If acceptable, you can use padding-left instead of margin-left...
You could also add an additional <div> to separate the 2 columns by 25px.
http://jsfiddle.net/x8dhnh4L/1/
Set side bar to
float:right;
and set content
height:100%;
A quick solution is to use display:table for #container and height:100% for #content.
http://jsfiddle.net/afelixj/x8dhnh4L/5/
If you actually want the "#content" div to expand to "#container" height, you need to set a height for parent div "#container" and height and float for "#content"
#container {
position: relative;
width:600px;
border: 1px solid red;
height: 800px; //whatever height you need
}
#content {
display: inline-block;
background-color:pink;
width:400px;
height:100%;
float: left;
}
This way "#content" height will adjust to "#container" height, but "#side-bar" will take the height it needs to show it's content.
With Hanoncs solution the parent div "#container" will adjust to child's div "#content" height.
An easy way around this is using display: table; declaration on the parent element and display: table-cell; declaration on the child element.
I would recommend reading Equal Height Columns with Cross-Browser CSS and No Hacks.
Hope this helps!
Related
I'm trying to find a solution for this case:
I have a div container with a static width and overflow-x: auto; 2 child divs, one of them has fixed width, the other one doesn't.
How can I make div without width to have same width as parent?
Here's an example:
http://jsfiddle.net/no1lov3sme/U7PhY/1827/
A div can be of the same width of his parent just by using width:100%;
So you can solve your issue just writing this code on your CSS:
#child1{
width:100%;
}
That's the Demo Updated
Hope it helps :)
You can use
max-width: 100%;
and the width will always stay below or equal to 100% regardless of the content you generate.
If you want to both the child div of same width as parent div.
you can try this in two ways
#child1{
width:inherit;
background:green;
padding:20px;
box-sizing:border-box;
}
And you can also use:
width:100%;
box-sizing property is not compulsory but it helps in managing margin and padding.
I've found solution, if you wrap child divs into another div and setting display: table; and width: 100%; to that div, it solves my problem.
Demo: http://jsfiddle.net/no1lov3sme/pe2mks4j/2/
Just Use 'display: block;' instead of width, You can use following CSS for this:
#child2 {
display: block;
background: red;
padding: 20px;
}
updated fiddle
I found the solution in 2022 🙂
#parent {
display: grid;
}
Why doesn't this CSS center the container div?
The JSFiddle is here (ignore the random JQuery):
http://jsfiddle.net/evamvid/7SW3L/20/
Here's the "preview":
jsfiddle.net/evamvid/7SW3L/20/embedded/result/
Because it doesn't have a defined width (and is 100% wide by default so it is centered).
You can either explicitly set the width to be the width of the blocks combined, or you can set the .container to inline-block and have it's container use text-align: center.
body {
text-align: center;
}
.container{
display: inline-block;
}
Demo
Note: I've put text-align: center on the body for demo purposes. In reality, I'd suggest adding another container <div> so you don't have your entire body text-aligned to the center.
Just give width to the div. Calculate the total width it will take for the inner boxes and set the with to the div.
If you dont want to give it a width then search for the Table layout options for div.
.container{
margin: 0 auto;
width: 759px;
}
Just check this jsFiddle
http://jsfiddle.net/shinde87sagar/7SW3L/26/
It is not happening because you have not given width to .container. By default, div takes 100% width. You need to either give width to .container or give it text-align:center as inside .container your divs are inline.
DEMO using width here.
DEMO using center here.
since you are using display: block, you can use text-align:center; to center the elements
UPDATED FIDDLE
Add following.
.container{
text-align: center;
}
YOUR EXAMPLE REVISED HERE * Read my comments
DEMO
You had some issues:
.container{
width:758px; /* Set a width */
/* display:block */ /* DIVs ARE ALREADY BLOCK LEVEL ELEMENTS */
margin: 0 auto;
}
Or simply use
.container{
text-align:center;
}
DEMO
Sorry for the bad title.
So I have 2 divs both with float:left property inside a container with fixed size. Each div can have optional size. Problem is if I fill div2 with a lot of text it goes below div1, but they should be next to each other. I want div2 just become smaller, not go below div1.
Check example on JS Fiddle:
Try
.div2 {
float: none; /* default value */
overflow: hidden;
}
Demo
One way is to nix the floats and use display:table-cell instead:
.div1 {
border:1px solid red;
display:table-cell;
}
.div2 {
border:1px solid blue;
display:table-cell;
}
jsFiddle example
Set a max-width for div2. Since you set no size for div2, when the length of text hits the edge of its parent element it drops down the next line. max-width will allow it to be dynamic in size until it hits the limit.
.div2 { max-width: 250px; }
jsFiddle Example
If you want both div should be of
Equal hight
Always on left and right
then use
.div1 {
border:1px solid red;
display: table-cell;
}
.div2 {
border:1px solid blue;
display: table-cell;
}
http://jsfiddle.net/w5h5H/8/
set a max-width on both divs as a percentage. Heres a fiddle: http://jsfiddle.net/w5h5H/10/
The percentages may need adjusting down a little to allow for any margins or borders you have.
I have several divs inside another div (let's call it container) and I was wondering if it possible to extend the width of a child div to go beyond the width of the container div.
It's easier to explain if you could take a look at this jsfiddle.
Currently, the container div has the width of 80% and so do all the child divs. I want to extend the width of the first div to 100% so that it completely fills the page horizontally.
How would I achieve this?
By the way, the reason I want to do this because I use the grid structure provided by this and it requires that eveything must be included inside a container div in order to get the features provided by the structure.
EDIT: I just realized the width of the container div is specified in px, and not in % as in the jsfiddle example. So setting the width of the child div to 120% does not guarantee to fill the page horizontally. How should I approach my problem? The only way I can think of right now is to get the width of screen in px, but I don't think that is possible in CSS.
I wouldn't do this but it seems to work:
#greendiv {
width:120%;
margin-left:-10%;
background-color: green;
}
See the Fiddle.
Why can't the #greendiv be before the .container or some other wrapper div?
Edit. Turn you thinking upside down (not really, just make a custom container inside mandatory container, here the .yellowdivs are custom containers and the #greendiv is the full width container inside container):
.container {
width: 100%;//or some amount of pixels and the yellow divs follow that setting
margin: 0px auto;
}
.yellowdiv {
width:80%;
margin-left:10%;
border: solid 1px;
background-color: yellow;
}
#greendiv {
background-color: green;
}
See the Fiddle.
If the parent container is centrally-aligned, you can use negative margins on both left and right sides:
#greendiv {
background-color: green;
margin: 0 -12.5%;
}
See fiddle here - http://jsfiddle.net/CtsTQ/12/
Add overflow:visible to your parent div which is .container.
.container {
width: 80%;
margin: 0px auto;
overflow:visible;
}
#greendiv {
background-color: green;
width:500px;
}
LIVE DEMO
Well I got what you asked for by doing this:
#greendiv {
background-color: green;
width: 140%;
margin-left: -20%;
}
But this is not a good practice I think...
Its usually not a good idea to extend stuff beyond wrapper containers but if I had to do it I would most definitely use relative positioning like this.
#greendiv {
position:relative;
left:-10%;
width:120%;
background-color: green;
}
You could also use other units like px to achieve more precise results.
I have a div with a height of 100% and a solid border. when i have too much content, it will display outside the div border.
how do i expand the div to the height of all the content inside the border instead of just 100% of the screen size?
the height:100% seems to be measuring the screen height but not the content inside of it.
<style>
#container{
height:100%;
width:100px;
border:1px solid black;
}
</style>
<div id="container">
link to problem sample page
Such a problem can be easily solved using the elusive clearfix! First off, remove all those height:100%; declarations you have for your #container, they're not needed, and try this in your CSS:
#container:before, #container:after {
display: table;
content: "";
zoom: 1;
}
#container:after {
clear: both;
}
absolutely positioned elements do not change the height of their container. Your farbartastic element has absolute positioning, so it will be laid out without informing its container of its height requirements.
You have some problems with yours floating element (which are flying outside the container), so , for correct this use overflow:hidden in the container
#container{
width:100px;
border:1px solid black;
overflow: hidden;
}