Xhtml/Css: How to Make Inner Div Get 100% Width Minus Another Div Width

xHTML/CSS: How to make inner div get 100% width minus another div width

The mysterious overflow: hidden; is your friend here. It stops elements adjacent to floats from extending behind the float — I think that’s the layout you’re looking for.

Here’s some slightly edited HTML: I don’t think you can have # characters in your ids:

<div id="outer">
<div id="inner1">
inner div 1. Some text...
</div>
<div id="inner2">
inner div 2...
</div>
</div>

And here’s the CSS to achieve the layout you want.

(I put in additional CSS for IE 6 with HTML conditional comments. I just noticed you didn’t actually need it to work in IE 6 too, but if you fancy being nice to the IE 6 users out there...)

<style type="text/css">
#outer {
overflow: hidden;/* Makes #outer contain its floated children */
width: 100%;

/* Colours and borders for illustration purposes */
border: solid 3px #666;
background: #ddd;
}

#inner1 {
float: left;/* Make this div as wide as its contents */

/* Colours and borders for illustration purposes */
border: solid 3px #c00;
background: #fdd;
}

#inner2 {
overflow: hidden;/* Make this div take up the rest of the horizontal space, and no more */

/* Colours and borders for illustration purposes */
border: solid 3px #00c;
background: #ddf;
}
</style>

<!--[if lte IE 6]>
<style type="text/css">
#inner2 {
zoom: 1;/* Make this div take up the rest of the horizontal space, and no more, in IE 6 */
}

#inner1 {
margin-right: -3px;/* Fix the 3-pixel gap that the previous rule introduces. (Shit like this is why web developers hate IE 6.) */
}
</style>
<![endif]-->

Tested and working in IE 6, 7, and 8; Firefox 3.5; and Chrome 4.

xHTML/CSS: How to make inner div get 100% width - margins

Taking away the width on the inner div should work, width: auto; will work with margins, and expand to the maximum horizontal area:

<div id="#outer" style="width:100%; border: solid 1px red;">
<div id="#inner" style="border:solid 1px green; margin:4px">
something inside ...
</div>
</div>

Setting Inner Div width's percentage of parent

Do not set a width for the #parent-right element, instead set a left-margin equal to the width of the #parent-left element.

<div id='parent-right' style="margin-left:50px;">

Demo at http://jsfiddle.net/gaby/5J38g/

Make 100% width div fit within another div and avoid horisontal scrollbar

I think this sounds too simple, but you could set the height to 100%:

<div style="width:100%; height:100%; background:red;">

How do I make a absolute positioned div have a width equal to it's parent minus some margin

Just specify all of the top, left, bottom, and right properties and the box will expand to be at all of those points.

.container {
position: relative;
width: 400px;
height: 300px;
}

.inner {
position: absolute;
top: 0;
left: 200px;
bottom: 0;
right: 0;
}

See the jsFiddle.

CSS: Two divs - one fills space, one shrink-to-fit

Simply change float: left to float: right in Paul's example.

HTML:

<div id="outer">
<div id="adaptive">I will adapt my width to my content.</div>
<div id="filler">I will fill the remaining space.</div>
</div>

CSS:

#outer { overflow: hidden; width: 100%; }
#adaptive { float: right; }
#filler { overflow: hidden; }

Test jsFiddle

adjusting div content width to display content on multiple lines

You could try and set word-wrap

Something like this:

<div id="pageNo" style="width: 700px; word-wrap: break-word;">
1 2 3 4......
</div>

Check out this fiddle: https://jsfiddle.net/9Ln3h3L2/1/



Related Topics



Leave a reply



Submit