I am putting together a HTML5 page. I notice that divs without specified widths within elements such as "header" and "footer" only fill the width of the window. So, if for example you have:
<header>
<div id="header-background" style="background: #ddd">
<h1 style="width:960px">Hello World</h1>
</div>
</header>
And you reduce the size of the window to below 960px (e.g. 600px) and scroll horizontally, the "header-background" will only stretch to 600px, and to the right will be a white space.
You can see this in action even at stackoverflow.com
Is there a way around this?
Any block level element will take up 100% of the page width by default. If you have a width that you can't ( or don't want to ) go under, then you can use min-width
header {
min-width: 960px;
width: auto;
}
Related
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>
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 need instruction on how to create a simple image grid with fluid resizing. I would like to place three (about 300px) square images on my front page that span the width and respond when the window is resized or if viewed on. If screen size is smaller, the three images will stay horizontal, but shrink. When viewed on a phone, the three images will stack with the first being at the top, the middle one second and the last one third.
I can get the images to show up, but I'm having trouble with CSS.
<div id="content" class="col-full">
<div id="grid">
<img src="http://lorempixel.com/320/320">
<img src="http://lorempixel.com/320/320">
<img src="http://lorempixel.com/320/320">
</div>
<style type="text/css">
#grid img {
float: center;
margin: 25px;
}
</style>
Any advice is appreciated for this NOOB. :-)
Try "text-align: center;" on container and "display: inline-block;" on images.
Must do the thing.
Example: http://jsfiddle.net/SvR6Z/1/
EDIT: Added ways to shrink screen.
To change images position on the page it response to window width you can do following:
Specify tags with relative sizes. For example with "width: 80%;" page width will always be 80% of the parent container (if the parent container is body, then it will be 80% of windows width). By default block-level element have width 100%; If you don't want it to be more than some value you can specify max-width property to do so. Element with: "width: 100%; max-width: 906px;" will always have width of 960px or less, no matter of window size.
If you want to have more control to the grid and decoration for mobile viewers (hede some elements for example) oyu can use css media queries ( read more about them here: http://css-tricks.com/6731-css-media-queries/ ) to do so. For example if you link css to page this way it will be working only when window width is more than 701px and less then 900px:
<link rel='stylesheet' media='screen
and (min-width: 701px)
and (max-width: 900px)' href='css/medium.css' />
I want to make a website that fills the pagewidth to 100% for all widths (available space) lower or equal to 1280px and for all widths greater than 1280 two filling side bars should appear (like this: |fill|website|fill|).
(How) can i do this without scripts? (by using css settings?)
You could use something like this:
#content {
max-width: 1280px;
width: 100%;
margin: 0 auto;
}
That refers to the style applied to a div that has all the page's contents.
Your "sidebars" would be whatever the background body is.
Do you want content in the "fill" bits, or just a border type thing? If just a border, you can use a background image/colour to make the fill effect, and use max-width on the main content bit. Be aware that it won't work in IE6, if that's important to you.
<div style="max-width: (bar width * 2) + 1280">
<div style="max-width: 1280px">
<!-- content -->
</div>
</div>