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;
}
Related
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!
I have a ul of imgs to create a side-scrolling gallery.
I'd like for the images' height to be constrained to the browser window and their width to resize in order to maintain their scale.
Even though I've specified a height for every containing element, the images with height:90%; are way bigger than the browser window. See the fiddle here: JSFiddle
What am I doing wrong here?
Additional info: If I set height: 90vh; on .gallery-image it looks pretty much exactly how I want it, but it feels like a hack and I'd like to understand why % isn't working.
I'm looking to achieve this functionality: example.
This might be what your looking for?
http://jsfiddle.net/jny0u3rc/11/
I simplified the code, this might not work if you have to have the images loaded in as list-items.
This specifies a container height of 100% and an image height of 90%. images are inline elements by default, so I set them to
white-space:nowrap and overflow:auto on the container.
The CSS:
.gallery {
height: 100%;
overflow: auto;
white-space:
nowrap; }
.gallery img{
margin: 20px 10px 0 0px;
height:90%
}
Is this what you're looking for? http://jsfiddle.net/jny0u3rc/8/
.gallery {
height: 100%;
overflow-x: scroll;
white-space: nowrap;
width: 100%;
}
.gallery-list {
list-style: none;
margin-top: 15px;
margin-bottom: 0px;
height: 100%;
}
.gallery-listitem {
padding-top:0px;
padding-right: 10px;
height: 100%;
display:inline-block
}
.gallery-image {
height:90%;
width:auto;
}
There are two issues:
You forgot to add 100% height on the html and body elements
You are using display: table and display: table-cell. The 100% height technique does not work on table displays. Change this to display: block and display: inline-block and you will get the expected results.
(Heavily) Modified Fiddle
You can achieve what you want by adding a width to each image. Of course the width doesn't have to be static. You can add a width of 100% and then set the height to auto so the images scale.
For a span to take a height, it has to be inline-block.
For an element to serve as offset parent (against which percentage heights of children are computed), it has to have position set. This is quite basic CSS.
See jsfiddle.net/6xh6wbpL/2.
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
I have this layout:
http://jsfiddle.net/spadez/BN9KJ/2/
It works by having an optional left column. How can I get the column colour extend all the way down the page even if there isn't enough content to fill it.
I was thinking it would be something like this:
height: auto;
But that doesn't seem to work
add the following css
html,body{
height:100%;
}
and then apply height: 100% for the divs
working fiddle
The Logic: setting the height of the body,html element,because it is the parent element..!!
BUT why should we give both html and body --> height:100% ??
the answer is https://stackoverflow.com/a/6654996/2967572
Body looks to its parent (HTML) for how to scale the dynamic property,
so the HTML element needs to have it's height set as well.
just give
#left_column {
width: 250px;
background-color: orange;
float: left;
height:100%; //added
}
along with
html,body{
height:100%;
}
DEMO
BUT
However the content of body will probably need to change dynamically.
Setting min-height to 100% will accomplish this goal.
it will be good alternative to give min-height
#left_column {
width: 250px;
background-color: orange;
float: left;
min-height:100%; //added
}
DEMO with Min-height
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.