I have a header that should stay at least as wide as the below div is or wider. Everything looks fine as the windows is larger than the content but when the window gets smaller so does the top div.
#top{
border:1px solid black;
height:200px;
width:100%;
}
#content{
margin:auto;
width:1000px;
height:600px;
border:1px solid red;
}
<body>
<div id="top"></div>
<div id="content"></div>
</body>
Any suggestions?
http://jsfiddle.net/Z242Y/
I believe your problem is with the fixed width you have on the content where as the top div has a percentage width, so to fix just change the content div to a percentage width that is a little smaller like I did, I set it to 80%
#content{
margin:auto;
width:80%;
height:600px;
border:1px solid red;
}
Here is your updated FIDDLE
Hope that helps.
When you give an element a width of 100% in CSS, you’re basically making this element’s content area exactly equal to the explicit width of its parent — but only if its parent has an explicit width.
Try setting the width of the #top using javascript.
var x = $('#content').width();
$('#top').width(x);
JS Fiddle
Firstly, you can wrap your html in a container as such:
<div id = "divContainer">
<div id="top"></div>
<div id="content"></div>
</div>
Then, you can give it a fixed width, so that it will decide the width of its contained elements. In this way, both the top and content div will always have the same width.
For that, you will need your CSS to be as such:
#divContainer {
width: 1000px;
}
#top {
border:1px solid black;
height:200px;
width:auto;
}
#content {
margin:auto;
height:600px;
border:1px solid red;
}
You can see it here: http://jsfiddle.net/G4L4V/
Note: In this approach, the two divs will always have the same width.
In case you want to enforce the 1000px width and still have the content width to be smaller than the top div, then you could make a slight adjustment in the #content class as such:
#content {
margin:auto;
width:90%;
height:600px;
border:1px solid red;
}
Related
I have a table inside a div, and the table won't fill the container div. Why not?
HTML:
<div class="fill">
<table class="table">
...
</table>
</div>
CSS:
.fill {
position:relative;
width:100%;
height:100%;
}
.table {
position:absolute !important;
left:0 !important;
right:10px !important;
bottom:0 !important;
top:39px !important;
}
The table only fills a small portion of the container div. Why?
UPDATE:
Or, If I try the following, it doesn't work in Firefox, but it does in Chrome.
HTML:
<div class="fill">
<div class="wrap">
<table class="table">
...
</table>
</div>
</div>
CSS:
.fill {
position:relative;
width:100%;
height:100%;
}
.wrap {
position:absolute;
left:0;
right:0;
top:39px;
bottom:0;
}
.table {
position:relative;
height:100%;
width:100%;
}
This second version is closer to what I want (since it DOES work in Chrome).
In regards to your original question, this is the answer to your 'why not':
If the height of the containing block is not specified explicitly
(i.e., it depends on content height), and this element is not
absolutely positioned, the value computes to 'auto'.
Source: http://www.w3.org/TR/CSS2/visudet.html#the-height-property
Your 'fill' div is set to 100% height, but what is its parent element's height set to? And if its parent element's height is also a percentage, what is its parent's height set to, and so on?
Add borders to your updated example and you could see, the height of 'fill' is 0 as it has no parent with a specified height, and so the height of 'wrap' is also zero. Add a parent wrapper to wrap the whole example with a height of 500px or so and it works as expected in (at least) Firefox and Chrome.
CSS:
.fill {
position:relative;
width:100%;
height:100%;
border: 1px solid red;
}
.wrap {
position:absolute;
left:0;
right:0;
top:39px;
bottom:0;
border: 1px solid blue;
}
.table {
position:relative;
height:100%;
border: 1px solid green;
}
.parent {
height: 300px;
}
HTML:
<div class="parent">
<div class="fill">
<div class="wrap">
<table class="table">
<tr><td>...</td></tr>
</table>
</div>
</div>
</div>
Tables are special, they don't behave like other block elements. Normally, a table will be just wide enough to hold its contents, and no more. Setting a width of 100% for the table should force it to fill the space allotted for it.
On .table, put width=100%
You may have to set a width for the td as well.. Depending keeping your layout structured
Your parent div of the table has a width and height of 100% which is going to be whatever the parent element is. The table needs to not be position: absolute, and therefore no need to have top, left, right, bottom set.
table {
border: 1px solid blue;
width: 100%;
height: 100%;
margin: 0;
}
Here's my fiddle of what you wanted, minus the top and right offsetting you have.
http://jsfiddle.net/jaredwilli/5s4DD/
You can instead use margin to set the top and right but you then cannot use the 100% width, that will not work. You can use display:inline-block, while not having a 100% width but instead dynamically setting the width to be 10px less than the width of the fill div's width using javascript but that's another thing. Same goes for the top positioning. You could do some other things too, but there's a lot of playing with things that you would need to do.
Also, you can use table, no need for a class unless you have multiple tables in the page.
And remove all of the !important's from your CSS.
It's never necessary to use !important, just saying.
height of div with id theatre is not varied as per the size of image but when i remove float from img the size of theatre varies why is it so? and how can get the height equal to that of image which remains on the right side of div
<div id="theatre">
<img src="http://www.wallmay.net/thumbnails/detail/20120927/abstract%20paintings%20outer%20space%20futuristic%20planets%20hope%20digital%20art%20science%20fiction%20space%20art%20blue%20li_www.wallmay.net_34.jpg"/>
</div>
#theatre{
width:100%;
margin:auto;
position:relative;
border-top:4px solid #fff;
border-bottom:5px solid #fff;
}
#theatre img{
height:400px;
float:right;
}
The effect occurs because the img tag is floating "over" the #theater div. Making it something else then float. (position: relative;) will fix this
I have this image that I would like use as a border.
There are 3 inline columns and there will be 2 of these images that separate the center column from the right and left columns.
I can use the css border property but it doesn't look right as the border passes the image on the top, bottom and through the center. Can this be done and if so, how can I do it?
The thing to keep in mind is that if the center columns grows, the image will need to grow in height with it. I want to stay away from setting a height on the page.
EDIT:
Is there a way to get these borders to grow in height if either the side columns or center columns grow?
<style>
#col1{
display:inline;
float:left;
width:100px;
border:1px solid
}
#col2{
display:inline;
float:left;
width:300px;
border:1px solid
}
#col3{
display:inline;
float:left;
width:100px;
border:1px solid
}
</style>
<div id="col1">1</div>
<div id="col2">2</div>
<div id="col3">3</div>
Where you see the borders now, they should be replaced with this image but the image should grow with the tallest column, whichever one that may be.
To use an image border:
img {border-left: 1px solid #ccc;}
/* assuming that the image is right and you need a border to the left. */
From the comments, tried this...
HTML
<div class="wrap">
<div class="left"><textarea></textarea></div>
<div class="right">
<img src="http://i.imgur.com/Dhu0f.jpg" alt="grow" />
</div>
</div>
CSS
.wrap {overflow: hidden; height: auto;}
.left, .right {float: left; height: 100%;}
.right img {height: 100%; width: auto;}
Fiddle: http://jsfiddle.net/N2bVR/
Update:
The best option for your question would be, running the border image as a background image to the body and give a repetition on y axis.
I have the following sample code:
<style type="text/css">
.div_class
{
position:absolute;
border:1px solid blue;
left:50%;
margin-left:-375px;
margin-top:100px;
height:300px;
width:500px;
overflow:hidden;
}
.iframe_class
{
position:relative;
border:1px solid red;
height:100%;
margin-left:-218px;
margin-top:-110px;
}
</style>
<div class="div_class">
<iframe src="http://www.w3schools.com/" class="iframe_class" />
</div>
In the code above, a div encloses an iframe of which only a part (from position [x=218,y=110]) has to be displayed. As you can see, I have placed height:100% for iframe which means it takes the height of the div. This is where the problem starts. The iframe is cropped. ie. the iframe's right border and bottom border have moved with the repositioning.
What I want: Even after the repositioning of the iframe, I want the right border and the bottom border to coincide with the right border and bottom border of the div respectively. How do I do it?
Note:
http://www.w3schools.com/ is taken just as an example. In my actual code, the iframe source will be decided by a PHP script.
I cannot set the iframe height to 218+document_height_of_iframe_src because as I said the src is dynamically decided by a backend script. So document_height_of_iframe_src will be unknown to me. Same is the case with document_width_of_iframe_src.
I have to accomplish all this without using JavaScript.
Thanks in advance...
Margin and border styles aren't included in an element width/height. So they have their own layout space. To fix it, add a bottom padding to the iframe_class's container (the div_class) like this.
.div_class
{
position:absolute;
border:1px solid blue;
left:50%;
margin-left:-375px;
margin-top:100px;
height:300px;
width:500px;
overflow:hidden;
/*added to compensate iframe border (top+bottom)*/
padding-bottom:2px;
}
.iframe_class
{
position:relative;
border:1px solid red;
height:100%;
/*removed. messed the layout.
margin-left:-218px;
margin-top:-110px;
*/
}
I need the content div to 'fill' the remainder of the screen left over after the header. I would would like to keep the wrapper padding & margin. Using absolute position doesn't work as the content div stops being visually nested in the wrapper. (The header div can be a fixed height if absolutely necessary, however I would prefer it to be dynamic.) Many thanks.
* {
margin:0px;
padding:0px;
}
html,
body {
height: 100%;
}
#wrapper {
background-color:#eee;
margin:20px; padding:20px;
border: solid 1px #333;
}
#header {
}
#content {
background-color:red;
}
.
<body>
<div id="wrapper">
<div id="header">header</div>
<div id="content">content</div>
</div>
</body>
Fiddle here:
http://jsfiddle.net/jHLhK/
Specify width and height set to 100% to your content div.
#content {
background-color:red;
width:100%;
height:100%;
}
The 100% means it will be as much as it has space available from surrounding elements.
Or you may only want height or only width to be 100% depending on your requirement.