All:
I wonder if I set father DIV width:auto and set Child div width:100%, then how browser decides the width of those DIVs
<div class="menuframe" style="position: fixed; width:auto; height:auto;">
<div class="menuitem style="width:100%; height:auto;">item1</div>
<div class="menuitem style="width:100%; height:auto;">item22</div>
<div class="menuitem style="width:100%; height:auto;">item333</div>
<div class="menuitem style="width:100%; height:auto;">item4444</div>
</div>
<div class="menuframe" style="background-color: red; position: fixed; width:auto; height:auto;">
<div class="menuitem" style="background-color: blue; width:100%; height:auto;">item1</div>
<div class="menuitem" style="background-color: black; width:100%; height:auto;">item22</div>
<div class="menuitem" style="background-color: green; width:100%; height:auto;">item333</div>
<div class="menuitem style="width:100%; height:auto;">item4444</div>
</div>
As you can see it will get the largest div width.
The menuitem divs should always be 100% width of the menuframe. How wide menuframe is depends on what CSS you set for it.
Related
Say I have a div with fixed dimensions
<div class="cell" style="width:150px; height:150px"></div>
If I want the image to be not wider and not higher than the div, but keep its original aspect ratio I can set max-height and max-width to 100%
<div class="cell" style="width:150px; height:150px">
<img src="" style="max-height:100%; max-width:100%">
</div>
However, in my case I want the img to be wrapped in a div. The reason is, I want to place some elements on top of the image, and position them relatively to the image:
<div class="cell" style="width:150px; height:150px">
<div class="image-button-wrapper" style="position:relative">
<img src="" style="max-height:100%; max-width:100%">
<button style="position:absolute; top:3px; right:3px"></button>
</div>
</div>
However once I wrap the image in a div it only respects the max-width property, but not the max height, So the image (and the wrapper) overflow the cell in vertical direction.
possible solution:
I read that for max-height to work I have to set the parent's height explicitly. But how would I do that, since I want its dimensions to be identical to those of the image?
While playing around with in the browser I realized that setting the wrapper width and height to "fit-content" solves it. But this is quite uncommon value. Is that the simplest solution?
I'm adding a code snippet where you can see how the max-width is obeyed while the max-height isn't
<div class="cell" style="width:150px; height:50px;border: 3px solid red">
<div class="image-wrapper" style="position:relative">
<img src="https://images.pexels.com/photos/62321/kitten-cat-fluffy-cat-cute-62321.jpeg?auto=compress&cs=tinysrgb&h=350" style="max-height:100%; max-width:100%">
<button style="position:absolute; top:3px; right:3px; width: 10px; height:10px"></button>
</div>
</div>
I added expected result. The only difference is making the wrapper's width and height "fit-content".
<div class="cell" style="width:150px; height:50px;border: 3px solid red">
<div class="image-wrapper" style="position:relative; width:fit-content; height:fit-content">
<img src="https://images.pexels.com/photos/62321/kitten-cat-fluffy-cat-cute-62321.jpeg?auto=compress&cs=tinysrgb&h=350" style="max-height:100%; max-width:100%">
<button style="position:absolute; top:3px; right:3px; width: 10px; height:10px"></button>
</div>
</div>
You can use background-image:
.cell{
background-image: url("https://images.pexels.com/photos/62321/kitten-cat-fluffy-cat-cute-62321.jpeg?auto=compress&cs=tinysrgb&h=350");
background-repeat: no-repeat;
background-size: 100% 100%;
}
<div class="cell" style="width:150px; height:50px;border: 3px solid red">
<div class="image-wrapper" style="position:relative">
<button style="position:absolute; top:3px; right:3px; width: 10px; height:10px">
</button>
</div>
img{
width: 100%;
height: 100%;
}
.image-wrapper{
width: 100%;
height: 100%;
object-fit: contain;
}
<div class="cell" style="width:150px; height:50px;border: 3px solid red">
<div class="image-wrapper" style="position:relative;">
<img src="https://images.pexels.com/photos/62321/kitten-cat-fluffy-cat-cute-62321.jpeg?auto=compress&cs=tinysrgb&h=350" style>
<button style="position:absolute; top:3px; right:3px; width: 10px; height:10px"></button>
</div>
</div>
Is this what you wanted??
It can be solved in many ways, it depends on what you prefer.
What you did is already correct, just add height: 100%; to the image-wrapper:
<div class="cell" style="width:150px; height:50px;border: 3px solid red">
<div class="image-wrapper" style="position:relative; height: 100%;">
<img src="https://images.pexels.com/photos/62321/kitten-cat-fluffy-cat-cute-62321.jpeg?auto=compress&cs=tinysrgb&h=350" style="max-height:100%; max-width:100%">
<button style="position:absolute; top:3px; right:3px; width: 10px; height:10px"></button>
</div>
</div>
Explanation: The image-wrapper div has width of 100% (by default, since div is a block and blocks have default width of 100%) but no specific height. When you set height for wrapper to 100%, it considers its parent's height (the cell's height), so then, the image will respect its parent height (the image-wrapper's height).
I'm using bootstrap framework for a project, but I'm having trouble with a central div for my site.
I need to put a div vertically centered but with a background color for 100% full width, and inside the container div of bootstrap.
I need to build the blue part (Central DIV) of the image http://www.hmsg.net/layout.png
use this
<div class="col-lg-12" style="background: url("../img/Bg.png"); background-size: 100% auto; height:100%;">
<div class="col-lg-12" style="hieght:500px; padding:0px; margin:0px;">
</div>
<div class="col-lg-12" style="background-color:#ffffff; hieght:500px; padding:0px; margin:0px;">
</div>
</div>
Try this
<div class="col-lg-12"
style="padding:0px; background-image: url('http://www.kiteworldmag.com/media/wallpapers/2/187/3.jpg'); background-size: 100% auto; height:500px;;">
<div class="col-lg-12" style="height:300px; padding:0px; margin:0px; display: block">
</div>
<div class="col-lg-12" style="background-color:#ffffff; height:100px; padding:0px; margin:0px;">
sdfsdf
</div>
</div>
Thanks Harutyun, for your answer,
I've ended with this solution:
<div style="margin:0; padding:0px; width:100%; height:100%; display:table">
<div style="display: table-cell; vertical-align: middle;" >
<div style="background:#99FF33">
<div class="container">Content Goes Here.</div>
</div>
</div>
</div>
<div id="outer" style="position:relative; width:100%; height:100%">
<div id="1" style="position:relative; width:25%; height:auto;"></div>
<div id="2" style="position:relative; width:65%; height:auto;">
<div id="2a" style="position:relative; width:15%; height:auto;"></div>
</div>
</div>
The problem is that the #2 and #2a are not aligned to #1 and I have to use top:-xxpx to align to top.
http://jsfiddle.net/D7HZR/
Fiddle. Is it what you are looking for?
#1, #2{
float:left;
}
Frankly speaking I'm not sure what you want. I think you want that :
<div id="outer" style="position:relative; width:100%; height:400px; border:#000000 solid 1px;">
<div id="1" style="float:left; width:25%; height:400px; background:#fff000;"></div>
<div id="2" style="float:left; width:65%; height:400px;background:#ff0000;">2
<div id="2a" style="float:left; width:15%; height:auto;background:#000fff;">2a</div>
<div style="clear:both"></div>
</div>
</div>
http://jsfiddle.net/D7HZR/2/
Ok, i think that i've understand your problem, just add the display property on your divs of id 1 and 2
<div id="outer" style="width:100%; height:400px; border:#000000 solid 1px;">
<div id="1" style="display: inline-block; width:25%; height:400px; background:#fff000;"></div>
<div id="2" style="display: inline-block; width:65%; height:400px;background:#ff0000;">
<div id="2a" style="width:15%; background:#000fff;"></div>
</div>
</div>
http://jsfiddle.net/p5KQJ/
#outer div {
float: left;
}
You also need to set a height on the inner div if you want it to take up vertical space.
It's unclear if you want the 3rd div nested or not so I made a fiddle that has one version nested and one with them all side by side.
FIDDLE here
Here's the jsFiddle: http://jsfiddle.net/RkMFK/
Here's the html and css:
<div class="cont">
<div class="item">one</div>
<div class="item">two</div>
<div class="item">three</div>
<div class="item">four</div>
<div class="item">five</div>
<div class="item">six</div>
<div class="item">seven</div>
<div class="item">eight</div>
<div class="item">nine</div>
<div class="item">ten</div>
<div class="item">eleven</div>
<div class="item">twelve</div>
<div class="item">thirteen</div>
<div class="item">fourteen</div>
<div class="item">fifteen</div>
<div class="item">sixteen</div>
<div class="item">seventeen</div>
<div class="item">eighteen</div>
<div class="island"></div>
</div>
.cont {
width: 240px;
height: 160px;
background-color:blue;
position:relative;
overflow:hidden;
}
.island {
position:absolute;
top:50px;
left:80px;
width:40px;
height:40px;
background-color:red;
}
.item {
float:left;
display:inline;
position:relative;
height:20px;
margin:2px;
padding: 0 10px;
background-color:yellow;
overflow:hidden;
}
How can I make the yellow items flow around the red "island" with css?
Summary: I have a container div of a fixed dimension. Somewhere within it is a small "island" div at a specific location (currently positioned absolutely, which removes it from the flow). How can I fill the container with a number of small elements of unknown width that surround the island? Any way to do this with css only? I'm stuck.
May be you want some what like in this fiddle . If i am lagging some where please let me know. so i can work out..
code:html
<div class="cont">
<div class="island"></div>
<div class="item">one</div>
<div class="item">two</div>
<div class="item">three</div>
<div class="item">four</div>
<div class="item">five</div>
<div class="item">six</div>
<div class="item">seven</div>
<div class="item">eight</div>
<div class="item">nine</div>
<div class="item">ten</div>
<div style="margin:0 20px" class="item">eleven</div>
<div style="margin:0 25px" class="item">twelve</div>
<div class="item">thirteen</div>
<div style="margin-left:58px;" class="item">fourteen</div>
<div class="item">fifteen</div>
<div class="item">sixteen</div>
<div class="item">seventeen</div>
<div class="item">eighteen</div>
</div>
I have a pretty common layout issue that I have traditionally used a table to solve, but would like some advice on getting it done with CSS. I have 3 images that makeup a 'container'. The left and right images are usually just shown using tags, and the center image is displayed as a 'background-image" with my content over it, so that the content appears to be in the container. I'm sure you've seen/used this a million times:
<table width="100" cellpadding="0"><tr>
<td width="50"><img src="myleftimage" /></td>
<td style="background: url('mymiddleimage');">Content goes here...</td>
<td width="50"><img src="myrightimage" /></td>
</tr></table>
The nice thing about this is that the width of the table is always the width of the browser (or parent) and the middle column where the content is dynamically sizes to take up the remaining space between the left/right images.
What I want to is recreate this using CSS, with as little hard coded info as possible. So something like this:
<div style="float:left; width:100%">
<div style="width: 50px;float:left;"><img src="myleftimage" /></div>
<div style="background: url('mymiddleimage');float:left;width:???">Content goes here...</div>
<div style="width: 50px;float:left;"><img src="myrightimage" /></div>
</div>
This works great accept for the middle div -how do I set the width? Right now I can hard-code it to be, say, 92%, etc. But want I want is for it to auto-fill the space. Can it be done using only CSS?
try
<div style="width:100%;">
<div style="width:50px; float: left;"><img src="myleftimage" /></div>
<div style="width:50px; float: right;"><img src="myrightimage" /></div>
<div style="display:block; margin-left:auto; margin-right: auto;">Content Goes Here</div>
</div>
or
<div style="width:100%; border:2px solid #dadada;">
<div style="width:50px; float: left;"><img src="myleftimage" /></div>
<div style="width:50px; float: right;"><img src="myrightimage" /></div>
<div style="display:block; margin-left:auto; margin-right: auto;">Content Goes Here</div>
<div style="clear:both"></div>
</div>
This will do what you want. Fixed sides with 50px-width, and the content fills the remaining area.
<div style="width:100%;">
<div style="width: 50px; float: left;">Left Side</div>
<div style="width: 50px; float: right;">Right Side</div>
<div style="margin-left: 50px; margin-right: 50px;">Content Goes Here</div>
</div>
Or, if you know the width of the two "side" images and don't want to deal with floats:
<div class="container">
<div class="left-panel"><img src="myleftimage" /></div>
<div class="center-panel">Content goes here...</div>
<div class="right-panel"><img src="myrightimage" /></div>
</div>
CSS:
.container {
position:relative;
padding-left:50px;
padding-right:50px;
}
.container .left-panel {
width: 50px;
position:absolute;
left:0px;
top:0px;
}
.container .right-panel {
width: 50px;
position:absolute;
right:0px;
top:0px;
}
.container .center-panel {
background: url('mymiddleimage');
}
Notes:
Position:relative on the parent div is used to make absolutely positioned children position themselves relative to that node.
making a dynamycal width with mobile devices support
http://www.codeography.com/2011/06/14/dynamic-fixed-width-layout-with-css.html