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>
Related
I'm trying to create the following layout in CSS:
It is a typical web layout where all the content is in a wrapper DIV that has a defined width and is centered on the page.
However, the purple background is a CSS gradient and needs to fill the entire width of the browser (and not just the width of the content wrapper). Furthermore, different pages will have different lines of headline/intro text (e.g. some pages might have 3 lines, others just 1) and so the purple background needs to match the height of this content.
I am also using a CMS which places all the content in a wrapper that has a width and is centered with margin:auto.
How can I achieve the layout?
At first I though I could use position:absolute on the headline/intro div. This works great. Except the rest of the content gets hidden behind the headline/intro div.
See an example here: http://jsfiddle.net/5BkX6/1/
I then tried using position:relative on the headline/intro div and then using negative left values together with padding to stretch the background of the DIV while keeping the content centered.
See an example here: http://jsfiddle.net/4DZYr/1/
This method works great, except it creates a horizontal scroll bar. I know I can apply overflow-x:hidden to the main wrapper DIV to hide the scroll bar, but I would prefer not to have it in the first place.
How can I achieve my goal. I do not want to use jquery to get the height of the headline/intro DIV.
This should give you the layout you want ^^
Here is the Html
<body>
<div class="header">
<div class="contentheader">This is the header</div>
</div>
<div class="container">
<div class="content">
<div class="left"></div>
<div class="right"></div>
</div>
</div>
</body>
And here is the style
.header{
width : 100%;
background : #0033aa;
height : 100px;
}
.contentheader{
width : 1000px;
margin : 0 auto;
}
.container{width : 100%;
}
.content{
width : 1000px;
margin : 0 auto;
}
.left {
width : 300px;
display : inline-block;
height : 200px;
background : #3300aa;}
.right{
width : 700px;
display : inline-block;
height : 200px;
background : #aa0033;}
Lets say I have this
<div class="sectionContainer">
<div class="itemsContainer">
<div class="items"></div>
<div class="items"></div>
<div class="items"></div>
</div>
</div>
The css:
.itemsContainer
{
/* width:3000px works, however this is what I want to avoid saying explicitly.*/
}
.sectionContainer
{
width: 1000px;
overflow: auto;
}
.items
{
width: 1000px;
float: left;
}
The sectionContainer has some set width.
The items has some set width.
The items container does not have a set width; it will scale to the size of its contents.
The items container's overflow is set to hidden, so that one can scroll through the items within the div. The items within the div are horizontally displayed IE they are side-by-side, I'm currently doing this with a float.
How can I do this with CSS only? Is it possible? I'm not looking for a JavaScript solution right away but can resort to that if needed.
to be more specific, this would work if I specified the itemsContainer to have a width of 3000. But I'm guessing that since it is the child of its parent div, its width gets sized to 1000. I do not want to explicitly set the size of the itemsContainer because this should be based upon the number of items. If I add more items, I want the itemsContainer to change its width to contain all of those items without having to alter the CSS.
Thanks!
It's not possible for CSS to guess what you want to happen -- meaning that it wants to cascade elements downward as opposed to horizontally, which is what you want.
http://jsfiddle.net/9NHFa/
Set the itemsContainer width to a 100% X the number of elements.
.itemsContainer
{
width:300%; /* since you have 3 elements
}
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.
I've this code :
.outer
{
width: 1000px;
float: left;
overflow: scroll;
}
.inner
{
width : 500px;
float: right ;
}
<div class='outer'>
<div class='inner'>
.....
</div>
<div class='inner'>
.....
</div>
<div class='inner'>
.....
</div>
</div>
I want to float those inner divs to right , ( one beside the other ) , and enable scrolling on the outer div when inner-Divs' width exceed parent width
Is my question clear ?
Thanks guys.
I think what you want is something like this: http://jsfiddle.net/cWpGS/2/.
Note the properties prefixed with * are needed for IE7. You should apply these two properties with an IE7 specific stylesheet instead of what I did here.
As Alejandro mentions, using floats you cannot achieve what you need. Instead, use inline-block and set nowrap to the parent div. Reset the wrap on the inner divs and you're done.
In the example you posted the inner divs have a width of 500px, and the outer div a width of 1000px, so you will not see any scrolling bars anyway.
Setting the inner divs to 1000px and the outer div to 500px, you should remove the "float:right" attribute to see the horizontal scrollbar. You can place the divs at the right side with a "margin-left:auto;" instead, but in this case it does not make any sense because the inner divs are greater than the outer div
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.