I want to set background-color:#000 for the whole .content div. I have made a frame for an image and it wraps the image perfectly ( http://jsfiddle.net/Yuaq8/ ), but only if the position for the frame is set to absolute. In this case .content is not filled correctly.
If I remove the position property that belongs to .pic-frame in this fiddle , the .content div is filled, but the frame looks weird. How can I make the frame look like the one in the first fiddle, so it fills the entire .content div?
position:absolute will remove your element from the flow. Use position:relative or display:inline-block instead on .pic-frame:
.pic-frame {
display:inline-block;
padding:12px;background-color: #DDD;
}
Demo
Try setting a width for .pic-frame.
JS Fiddle
Or you can set width to 200px in pic.frame div and remove the width and margin property from #pic div.
.pic-frame {
width: 200px;
padding:12px;background-color: #DDD;
}
#pic {
height:200px;
background-color: #999;
}
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;
}
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've created the following demo to show my issue:
http://francisbaptiste.com/nov17/
Each div is 33.33% wide. Within the div is an image with 100% width. I want it to be a perfect grid of images, but the height of the div is always a little more than the height of the image.
Shouldn't the height of the div be set by the height of the image within it? So why is there that little bit of space at the bottom?
The gap is coming from the actual whitespace after the image tag. You can use this to fix it:
.card img {
display: block;
}
Fiddle
Or a more hacky solution:
.card {
font-size: 0;
}
Fiddle
I thinks the problem is the height of outer div, you cannot use auto since the browser may have some default action for the div and its inside content. Instead, I specify the percentage of height and solved the problem
.card {
width: 33.333%;
height: 50%;
overflow: hidden;
float: left;
background: black;
color: white;
}
Does that make sense to you?
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.