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 id
s:
<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
How to Center Multiple Inline-Block Elements with CSS
How Is the "Greater Than" or ">" Character Used in CSS
How to Vertically Align 2 Different Sizes of Text
How to Inspect and Tweak :Before and :After Pseudo-Elements In-Browser
Apply Webkit Scrollbar Style to Specified Element
CSS Class and Id with the Same Name
How to Give One CSS Class Priority Over Another
How to Use 3-Digit Color Codes Rather Than 6-Digit Color Codes in CSS
CSS to Make Bootstrap Navbar Transparent
Ie Crossing Out Pseudo Element CSS
Height: Calc(100%) Not Working Correctly in CSS
Css: Left, Center, & Right Align Text on Same Line
Force Footer on Bottom on Pages with Little Content
How to Add Automatic Class in Image for Wordpress Post