I have a floating parent div containing a child using width: 30%.
It seems this parent div won't resize if using percent as the width unit, but it works well when using px or ems.
Is there any way to make the parent div adjust its width when using width: 30% since I would like to have a fluid layout?
Please have a look at this example for more details:
http://jsfiddle.net/sBzYH/
<div class='percent container'>
<div>
<h3>width: 30%</h3>
<p>
When using the child div
with percent width, the floating
parent div keeps expading 100%.
</p>
</div>
</div>
<div class='pixel container'>
<div>
<h3>width: 100px</h3>
<p>
When using the child div
with pixel width, the floating
parent div resizes accordingly.
</p>
</div>
</div>
The parent container will already be a fluid width, because it's a div it will default to the full available width but you can explicitly limit that. This CSS will make your two examples approximately the same size:
.container {
width: 66%;
min-width: 325px;
}
If there's more than (just under) 500px available for the container then it will expand to take up 66% of the available space, but it will stay wide enough that the 30% width child element is always at least 100px wide.
Related
I want to have a header with 100% width,
in some cases there is a horizontal scrollbar and that
causes the div to cover the visible area and not the whole
parent element.
.cont {
width: 100%;
}
http://jsfiddle.net/BhRdV/1/
There are certain cases, where even if you don't set width to DIV, it will still scale 100%.
Also, please be clear with ur question.
<div style="width:1200px;">
<div style="width:100%;">Tadda</div>
<div>Tadda 2</div>
</div>
I am putting together a HTML5 page. I notice that divs without specified widths within elements such as "header" and "footer" only fill the width of the window. So, if for example you have:
<header>
<div id="header-background" style="background: #ddd">
<h1 style="width:960px">Hello World</h1>
</div>
</header>
And you reduce the size of the window to below 960px (e.g. 600px) and scroll horizontally, the "header-background" will only stretch to 600px, and to the right will be a white space.
You can see this in action even at stackoverflow.com
Is there a way around this?
Any block level element will take up 100% of the page width by default. If you have a width that you can't ( or don't want to ) go under, then you can use min-width
header {
min-width: 960px;
width: auto;
}
<div id="parent">
<div id="leftColumn"></div>
<div id="rightColumn"></div>
</div>
When the height of the 'leftColumn' and the 'rightColumn' less than
screen height, the 'leftColumn' and 'rightColumn' should have the same
height as screen.
If the height of the 'leftColumn' and the 'rightColumn' longer than
screen height, the 'parent' div should expand automatically.
Is there anyone know how to solve this problem? Thanks in advance.
left and right columns:
min-height:100%;
parent:
min-height:100%;
height:auto;
That should work ;)
Even if the parent DIV encircle childs, if childs are carry out from the normal flow with CSS, the parent height DIV will be one EM.
You can verify that by changing the background-color of your parent DIV and give to child properties like position: relative or float: left keeping parent DIV in the normal flow
i have a sidebar having many nested divs to place my rounded corrners.but when i tried to set the content's div height equal to 90% its not expanding.what is the issue.my html,body have 100% height.my div nest is some what like this.
<body>
<div class="main"> //it contains header n content div,its height is 90%
<div class="header"></div> //its height is 10% of main div
<div class="content"> //its height is 90% of main div
<div class="vertical_navigation"> //its height is 99% of content div
<div><div><div><div> //thses divs are for rounded corner image concept
<div> </div> //this div contains the data.now its height is 80% but its not expanding?h
//i cant use min-height,its not working too.how to give height referenced to //vertical navi div??
</div></div></div></div>
</div>
</div>
</div>
<footer></footer>
</body>
have you considered applying rounded corners with just css and not worrying about the ieretards not having them?
When having so much nested div, it's good you consider the measurement in width and height of the DIV if the container div is lesser that the ones inside it, it won't stretch,because that way, the browser can't detect how far the div is meant to stretch. to resolve this use make proper use of CSS.
I need a child div to be as high as its parent, but I do not know the parent's height. It can change.
Setting "height: 100%" does not work, as the div will take the height of the entire page.
This is the layout of the divs:
<div id="deelnemersballoon">
<div class="balloonarrow"></div>
<div class="balloonborder">
<div class="ballooncontent">
<div id="aantaldeelnemers">1</div>
<div id="deelnemertekst">deelnemer werd toegevoegd.</div>
<div class="clear">
<button>Add something</button>
</div>
</div>
</div>
</div>
.balloonarrow should be as high as #deelnemersballoon
set parent div height in pixels (for ex height:100px ) and set child as 100% (height:100%) . Child only occupies parent div width fully
I never had much luck with height: 100%; even when playing by the rules. What does .balloonarrow do? If you're just trying to snap a graphic to the bottom of the div, you can try position: absolute; and bottom: 0px;, as long as #deelnemersballoon is set to position: relative;.
If you're just looking to make a solid/patterned visual contained by .balloonarrow, you're better off making a stretch image: create an image 3px or 4px tall, make it the background of #deelnemersballoon, and set it to repeat-y. Quick and dirty way to make a 100% height sidebar.
Hope this helps, can't tell much more without seeing your css.
A child div will not take up 100% of its parent if it has something in the markup before it:
Html:
<div id='parent'>Parent (Mark up before child)<div id='child'>Child</div></div>
css:
#parent {background:blue; height:500px; color:white}
#child {background:red; height:100%}
You can find a working example here. (Removing the text from the #parent div will make the child fill it 100%)
http://jsfiddle.net/wcprA/2/
The same thing applies if you have markup after the 100% child aswell, as seen here
http://jsfiddle.net/wcprA/5/
Try adding position:relative to the parent div. Then the 100% on the child div should reference the parent div. In general 100% height is going to look for the nearest parent element that has a position set on it - and if it doesn't find any it will eventually find the body tag and use that.