I found if I specify div with only width CSS attribute, the div will not occupy the width I claimed, see:
<div style="width: 300px;">
</div>
It will never occupy 300px space.
Is it possible that I want an empty DIV occupies 300px width?
You either need to add content or set a height. Otherwise an empty div will not appear because its height is determined by its contents.
See Example
You need to specify something or a space to achieve that:
<div style="width:300px; border:1px solid black;"> </div>
The border was given to show width but you can remove it.
height must be specified in order to make it visible.
Related
I have a div containing a textarea element.
And I need to give it the right vertical size.
The container Div have right size. (100%)
I want to give a min-height or min rows, to provide a scroll if necessary, and a height of 100% (the 100 % of div).
I can't. I don't know how to do this. I need an example.
The very basic example is
<html>
<body>
<div style="height:100%;border:1px solid green;">
<textarea style="min-height:100px;height:100%;width:100%;border:1px solid red;"></textarea>
</div>
</body>
Borders are only to show dimensions. But in your case it might be more complicated. Please look at the definition of a containing block and height calculation.
I have a containing div that is constrained in its height and width. It has 2 child elements.
The first child can be of variable height (as the text within it can wrap, and this is desired behavior).
The second child is a div wrapping a table. The div is set to overflow-y: scroll, so it is meant to fill the remaining height of its container, and provide scrolling for the rest of its inner table when it doesn't completely fit.
Here's a simple view of the structure:
<div id="container" style="height:300px; width:200px">
<div id="headerArea">
...
</div>
<div id="scrollingTable" style="overflow-y:scroll">
<table>
...
</table>
</div>
</div>
Despite my tinkering, I can never get the second child, the scrollingTable div, to constrain itself to the limits provided by the container. Using height:100% doesn't FILL the remaining container height, but sets the height to the container's exact height (300px), which is too much because the headerArea takes up space too.
If the height of the headerArea was fixed, I could specify the scrollingTable's size as 300 - heightOfHeaderArea, but as mentioned above the headerArea's height is NOT fixed.
I'm likely going to have to use JQuery to resize the scrollingTable to the specified height, but I am curious if there is a pure css solution.
Any suggestions, or is this impossible without fixing the headerArea's height?
You can't do this with css alone. You have to give the scrolling div a height for it to be able to scroll (100% or fixed value).
http://jsfiddle.net/tUrTu/
This can be achieved though with javascript :
http://jsfiddle.net/tUrTu/2/
Hope it helps.
If you set the scrollTable to 100% it will inherit the 300px from the container div and go outside of the container div regardless of the fixed height you set to headerArea
You shall use Javascript to dynamically generate the height, but beware the sequence of the code must be HTML -> Javascript -> CSS.
code:
<div id="container" style="height:300px; width:200px">
<div id="headerArea">
...
</div>
<div id="scrollingTable">
<table>
...
</table>
</div>
</div>
<script language="javascript">
var headerh = document.getElementById('headerArea').offsetHeight;
document.getElementById('scrollingTable').style.height = (300 - headerh) + 'px';
</script>
<style type="text/css">
#container {
height: 300px;
}
#headerArea {
}
#scrollingTable {a
overflow-y: scroll;
}
</style>
How to split screen with three divs by following demands:
- main div should cover whole screen (100%x100%)
- sub div after div should cover main div( each sub div = 33% )
I tried to do it as following :
<div style="width:100%; height :100%; background-color:Lime;">
sss
<div style="width:100%; height:34%; background-color:Blue;">
a
</div>
<div style="width:100%; height:33%; background-color:Gray;">
b
</div>
<div style="width:100%; height:33%; background-color:Aqua;">
c
</div>
</div>
You need to set height of body and html to 100%. See this fiddle.
I think your main source of confusion is that your 'main' div is only going to take up as much space as it needs to satisfy the style requirements. It will take 100% of the size of the parent element, but if that size is not defined, it only grows to the minimum size required by whatever it contains.
In this fiddle, I just wrapped your code in a div defined to be 200px high, and it seems to work fine (however, note that the 100% is actually diminished by the fact that 'sss' is included in the main div, before the contained divs).
If you want to remove the white margin, set the style to "margin:0" on the body tag.
Use the display: flex and make sure to set 33% as your width for each, that way you make sure that the three of them occupy 1/3 of the screen
HI, can someone please help me with this. I have:
<html>
<body>
<div style="width=100%">
<div style="float:left; background-color:Red; height:100px">Red</div>
<div style="background-color:Green;">Green</div>
<div style="background-color:Yellow;">Yellow</div>
</div>
</body>
</html>
Which gives me exactly what I want, a Red div on the left with a Green div beside it taking up the rest of the width with a Yellow div beside the Red but below the Green div.
However the parent div actually has to also float left ie.
<html>
<body>
<div style="width=100%; float:left">
<div style="float:left; background-color:Red; height:100px">Red</div>
<div style="background-color:Green;">Green</div>
<div style="background-color:Yellow;">Yellow</div>
</div>
</body>
</html>
This breaks it. Is there a way to get it working again with the parent div float left?
if you float the parent div, in order to keep them all in the parent container, you must also float them all. Those inside without float will fall out.
Edit: Note though that once you float them, width:100% means nothing anymore since the element don't know what to align 100% width with. Might have to give it some fixed width, or use JQuery to get width from document.
http://jsfiddle.net/robx/cpFUV/
It breaks it because a div is normally set to have a width of 100% it's parent container. Setting float:left makes the width set to the content's width. Set a width on your parent container and it should fix it.
You wrote width=100% instead of width:100% - fixed example:
<html>
<body>
<div style="float:left;width:100%;">
<div style="float:left; background-color:Red; height:100px;">Red</div>
<div style="background-color:Green;">Green</div>
<div style="background-color:Yellow;">Yellow</div>
</div>
</body>
</html>
The reason it worked originally, is that there is an implicit width of 100% on block elements, but you made your div an inline element (of sorts) by adding the float (such that the width of the div reverted back to the content's width, just as your Red div works).
Your width=100% was always ignored, so by putting the width:100% as it should be, you are specifying a width for the element and all is well.
Example: http://jsfiddle.net/hwb4w/
I have a few floating div elements that are floating left. They all have a height of 100%. One of the divs exceeds the height of the view port and the other DIVs do not resize to 100% of the parent DIV which has a position of relative set (which is how it should work in my oppinion).
Except the display table, table-row, table-cell solution, is there any other way of making all divs 100% of the viewport and if one needs to be higher, make the others stretch to 100% of the parent div that got stretched by the increased div.
How? :)
Thank you.
Correct me if I'm wrong but it seems that you want equal height floated columns. The explanation to this can be quite involved so I'll point you to a few examples.
Try
http://thelucid.com/2010/12/03/the-solution-to-fluid-inconsistencies-and-equal-height-columns/
http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks
I don't follow your question completely. Have a look at this code:
<html>
<body>
<div style="height:50px;position:relative">
<div style="background-color:red; float:right; height:100%">moo</div>
<div style="background-color:green; float:right; height:100%">boo<br/>coo<br/>doo<br/>goo<br/>boo<br/>coo<br/>doo<br/>goo</div>
<div style="background-color:blue; float:right; height:100%">foo</div>
</div>
</body>
</html>
As you can see, the center DIV is has height of more than 50px, so the the outer DIV (with the relative position") is stretched, along with the other inner-DIVs.
Doesn't this work for you?