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>
Related
I have a square image within .img-container. Sometimes it takes a few seconds for an image to load and the .img-container collapses and only takes the full height when the image loads. However, I would like it to keep the full height (as if the image is there) while the image is loading.
I would've easily done this by setting a min-height on img-container class, however it's a fluid grid and the image is responsive (notice bootstrap's img-responsive helper class) which makes it hard to set the min-height to an appropriate value for different screen sizes (although achievable with media queries as a last resort).
Solving this by putting a placeholding image sounds like an overkill (especially performance wise on mobile). Also, not sure what would load first then, the placeholder image or the actual image.
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4">
<div class="card">
<span class="img-container thumbnail clearfix">
<img alt class="pull-left img-responsive" src="http://...">
</span>
<div class="caption">
<a href="http://.." class="card-title lead">
Some text
</a>
</div>
</div>
</div>
EDIT DUE TO COMMENT
If you do not specify a source at all (not even a dummy, temporary one), the browser will not even try to "guess" the image's height, and so it collapses. If you know the ratio of the image (it's obviously 1:1 in case of a square picture), you can use the following trick to preoccupy the space, and scale the image along with the div.
Set the following CSS:
.test-div-inner {
padding-bottom:100%;
background:#EEE;
height:0;
position:relative;
}
.test-image {
width:100%;
height:100%;
display:block;
position:absolute;
}
Then you can use the following HTML:
<div class="test-div-inner">
<img class="test-image" src="http://goo.gl/lO9SUU">
</div>
Here is the working example: http://jsfiddle.net/pQ5zh/3/
Note that the fiddle contains another div element, this is only required if you would like to give it all a padding or border, since the padding-bottom calculates the padding in pixels based on the width of the div INCLUDING THOSE PARAMETERS, which is NOT the effect we want to achieve (the image would be a little taller than it should be).
For non-square images:
If you would like to change the ratio of the picture, just change the padding-bottom of the container div accordingly. For example, if you would like to place an image with a ratio of 2:1, change the padding to 50%. To keep it short: the ratio of the container div's width and padding should always be equal to the ratio of the image's width and height.
There is an easy way to do exactly this, but it only works for square images.
Specify the width of the image (using CSS) to be 100%. This way the browser will automatically assume that the image height is the same as it's width, and preoccupy the place.
http://jsfiddle.net/pQ5zh/2/
.test-image {
width:100%;
}
Note: There is a way to achieve this for non-square images too, but that is a bit more complicated.
EDIT: See above.
Ok, assuming all images are square, we can do it. Add an extra div around your image like this:
<div class="img-container">
<div class="image-wrap">IMAGE HERE</div>
</div>
Then we want CSS along the lines of
.img-container {
position:relative;
background: #ccc;
width:200px; /* Remove this width */
color:#000;
}
.img-container:before{
content: "";
display: block;
padding-top: 100%;
}
.image-wrap {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
See this in action:
http://jsfiddle.net/jamesking/LNvmY/
You'll want to remove the width set in .img-container
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;
}
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;}
Simply, I want the body of the site to occupy 100% of the browser in 1024x768 monitors, and for monitors with higher resolution (1024x768 and higher) to display the body in the middle (center aligned) leaving equal amounts of space on the left and right.
This is very common in many websites but I don't know how to implement it. Can anybody show me how, please, and finish up the CSS code I started? Thank you very much.
HTML
<div class="header">content</div>
<div class="side-bar">content</div>
<div class="container">content</div>
CSS
html body{
margin:0;
background:#fff;
}
.container{float:left}
.side-bar{float:left}
"Today, most visitors are using a screen resolution higher than 1024x768 pixels" - http://www.w3schools.com/browsers/browsers_display.asp
so if you need to have a 1024 pixels width website you just make your container to be 1024 pixels fat :) and margin:auto;
http://jsfiddle.net/kx2nE/3/
I used a smaller size one so you can see better the result in jsfiddle, but you can replace those values in your css.
#container
{
width:300px !important;
height:500px !important;
border:1px solid red;
margin:auto;
}
<div id="container">
container with equal margins on window resize<br />
<br /><br /><br />
<b>
width and height values set to yours 1024x768
</b>
</div>
Check out the Fluid 960 Grid System - http://www.designinfluences.com/fluid960gs/
It lets you nicely organize content divs in a horizontal grid that takes up 100% of the browser's width.
Typically this type of question is not encouraged on stack overflow due to the fact that you didnt actually present a problem. However there is a very good css coder who has solved this for you. Here is a link the download for you to try.
http://matthewjamestaylor.com/blog/ultimate-1-column-full-page-pixels.htm
Set width to a percentage and min-width for fixed size on 1024 monitors:
#main {
width: 95%;
min-width: 990px; /* I suggest a number around 990, due to scroll bar width, experiment at will or use javascript to apply dynamically */
To align the site centered, use an automatic horizontal margin:
margin: 0 auto;
}
Note: You need to apply these to a div directly beneath the body (The body itself cannot change size)
<body>
<div id=main>
<div class="header">content</div>
<div class="side-bar">content</div>
<div class="container">content</div>
</div>
</body>
Edit: Ah I see what you mean, fluid with maximum width, most of the aforementioned stands, change 95% to 100% and min to max:
#main {
width: 100%;
max-width: 990px;
margin: 0 auto;
}
I am newbiew to css.
Please have a look of this simple two column layout first.
http://www.vanseodesign.com/blog/demo/2-col-css.html
I want to ask why the width of content + width of sidebar =/= width of container?
Width of content = 610px
Width of padding in content = 5+5 = 10px
Total width of content = 620px
Similarly Total width of sidebar with padding = 340px
So total content and sidebar = 620+340 = 960px which is equal to width of container !
The W3C specification says that the width of a box is: margin + border + padding + width. In this way you'll be able to determine the actual box width.
If you sum the resulting box widths you will have a result equal to the container width.
Without seeing your code it's hard to give you an answer. But some basic CSS and html is below which will give you a content area the same size as your header, see it in action here http://jsfiddle.net/peter/wZQNY/
The CSS
.container{
margin:0 auto;
width:960px;
}
.header{
width:100%;
background:#eee;
}
.content{
width:100%;
background:#ccc;
}
The HTML
<div class="container">
<div class="header">header navigation</div>
<div class="content">page content</div>
</div>
I can't see the problem. In your link, the content.width + sidebar.width == container.width
What's your problem? what browser are you using?
A possible solution is that you may have some weird behavior due to border or margins, for that, you should apply a CSS Reset.