kinda a noob question on css
I have a couple of divs
in a page. Now when I zoom in that page Div 3 (that is currently floating left)
doesn't fit any more so it falls right under Div 2. How can I change this behaviour for the whole page so that a scrollbar appears when I zoom in? I tried setting the overflow-x : scroll for the whole body in a css but it didn't seem to have any effect.
I made a JSFiddle for this: http://jsfiddle.net/Lq3Hv/
html
<div class="first">div1</div>
<div class="second">div2</div>
<div class="third">div3</div>
<div class="fourth">div4</div>
css
.first {
background-color:red;
width: 400px;
}
.second {
background-color:blue;
width: 200px;
float:left;
}
.third {
background-color:green;
width: 200px;
float:left;
}
.fourth {
clear:both;
background-color:yellow;
width: 400px;
}
Try to zoom in the browser and you'll see that div3 falls under div2. (In chrome anyway).
I generally want to use a solution that works both in IE8 + and chrome.
thanks.
All you need to do is Add a wrapper div and give total width to it.
Working Fiddle
HTML
<div class="wrap">
<div class="first">div1</div>
<div class="second">div2</div>
<div class="third">div3</div>
<div class="fourth">div4</div>
</div>
CSS
.wrap {
width:400px;
}
Related
I have been banging my head against the wall trying to figure out this problem and I have looked high and low for the answer and came up with similar results.
Synopsis
The problem is that I am building a website using the 960 grid and have three columns that I want to stretch at 100% at all times. Here is a fiddle for your reference: http://jsfiddle.net/Uec7h/1/
Essentially the html is like so:
<div class="contentWrapper">
<div class="container_12">
<div class="grid_2 leftSide clearfix">
Left sidebar content.
</div>
<div class="grid_7 content">
Lots of content loaded from the server.
</div>
<div class="grid_3 rightSide">
Right sidebar content.
</div>
</div>
</div>
with the CSS being like
html, body {
height: 100%;
}
.content {
height: 100%;
}
.leftSide {
height: 100%;
background-color: #000000;
}
.rightSide {
height: 100%;
background-color: #000000;
}
.contentWrapper {
height: 100%;
}
The fiddle isn't completely accurate to what I am seeing on my local version, but it's close. Seems like the left and right sidebars do not want to expand to 100% no matter what I do.
What I've Tried
Most of the answers I have found on SO have suggested to put height: 100% on the html, body elements and everything should work out fine. Adding this attribute and giving both sidebars height: 100% did work a little bit, but if the content in the middle column gets too big, it stops at a certain point and won't continue to stretch.
I have tried adding the clearfix class that comes with the 960 grid but it didn't seem to help at all.
Question
How do I get the left and right side bars height in the fiddle to be 100% no matter what content is in the middle column?
If you add the following CSS to the sidebar elements it will fill the 100% of the height.
display:block;
height:auto;
position:absolute;
top:0px;
bottom:0px;
If you place the sidebar into a wrapper div with relative positioning, the content section will be again in it's right place...
I would also set padding and margin to 0 for the body.
EDIT:
If you add height: 100% to the .container_12 it will get a real height, and children elements can have a 100% height. Notice that the sidebars will be as height as the window itself, but your content at the middle can be taller than 100%... Fiddle
Dont know the 960 grid, the EDITED solution - using visibility: visible; -
HTML
<div id="box">
<div class="vision"> sdfsdfsd </div>
</div>
CSS
#box {
float: left;
border: 2px solid red;
}
.vision {
width: 300px;
height: 600px;
visibility: visible;
}
I'm trying to achieve, that the div's will behave like an example on picture, using css:
Is there any clean way to do this? I achieve this using javascript to calculate "left" div height and "main" div width and height. But i dont like this solution...is there any way to do this using css only?
Edit:
Page must not have scrollbar...so page's height is always max 100%, and no more...
thanks
If the sidebar (or any other div) is 100% height, and on top you have a 30px header, so that causes your container to be 100% + 30px height.
In the future you will have in css3 calc():
http://hacks.mozilla.org/2010/06/css3-calc/
This will solve your problem.
But for now you can add overflow: hidden; to the html and body section, but I recommend calculate the height of the sidebar ( container height - header height) using Javascript.
Check fiddle here
If you mean the two-column layout, you do it with pure CSS like this:
.container {
background-color: #aaaaaa;
}
.left {
float: left;
width: 100px;
clear: left;
}
.right {
margin-left: 100px;
background-color: #888888;
}
and HTML:
<div class="container">
<div class="left">left</div>
<div class="right">right</div>
</div>
Live demo: jsFiddle
The div on top can be achieved without any special CSS. To place something below (a footer for example), you'll need to use clear: both.
Without any code it is hard to determine what you want. Here is a extremely simple version of what I believe you want.
HTML:
<div id="header">
</div>
<div id="side">
</div>
<div id="content">
</div>
CSS:
#header {
width:100%;
height:50px;
}
#side {
width:300px;
height:100%;
float:left;
}
#content {
width:660px;
height:100%;
float:left;
}
jsFiddle
I'm looking for CSS rules to set a simple page layout.
I want a header div that has a fixed height, and extends fully across the top of the viewport from left to right,
I want a main content div that completely fills the remainder of the viewport.
There should be no area within the viewport that is not within one of these two divs, and neither div should extend beyond the viewport.
And these should remain true as I resize the browser. Regardless of what I put in either div. (Assuming, of course, that I'm not using overflow:visible.)
Seems simple enough, but I've not been able to make it work.
What about something like this: http://jsfiddle.net/WqCYh/
For the sake of people not wanting to click the link, here's the HTML and CSS:
<style type="text/css">
#header
{
height:100px;
background-color:red;
position:absolute;
top:0px;
left:0px;
right:0px;
}
#body
{
background-color:blue;
position:absolute;
top:100px;
left:0px;
bottom:0px;
right:0px;
}
</style>
<div id="header">
Header
</div>
<div id="body">
Body
</div>
Are you sure you need your content div to be the height of the browser? You can apply a background color to the body to simulate full viewport coverage.
Anyway here is the 100% height code...
CSS
html,body { height: 100%; }
#header { height: 100px; background: red; }
#content { min-height: 100%; background: blue; }
#inner { padding: 20px; }
XHTML
<div id="content">
<div id="header">
<h1>Header</h1>
</div>
<div id="inner">
<p>Content</p>
</div>
</div>
This is probably a very dummy question, don't throw your shoes at me :)
Consider having HTML like this:
<div class="container">
<div class="header">
</div>
<div class="body">
</div>
<div class="footer">
</div>
</div>
I want 'header' and 'footer' to be anchored to the parent's top and bottom respectively, and 'body' to grow easily to fit all available space.
What would the CSS look like to achieve this?
EDIT: Maybe I'm saying this wrong (i'm not exactly a web developer :) ), but what I need is to have some part of a div always attached to its bottom. So when div grows this part (which might have a fixed size) would go lower with the div's lower end. But all this doesn't mean attaching a div to the bottom of browser's window.
If I understand your question correctly, you require some really basic css.
body { background: black; }
.container { width: 960px; }
.header { height: 100px; background: #ddd; }
.content { padding: 10px; }
.footer { height: 100px; background: #ddd; }
Your div's are not floated, so will stack on top of each other like pancakes.
If you want the footer to be "sticky", see here for a solution...
http://ryanfait.com/sticky-footer/
Here you go:
Example page - footer sticks to bottom
this will have the content right
between the footer and the header.
no overlapping.
HTML
<header>HEADER</header>
<article>
<p>some content here (might be very long)</p>
</article>
<footer>FOOTER</footer>
CSS
html{ height:100%; }
body{ min-height:100%; padding:0; margin:0; position:relative; }
body:after{
content:'';
display:block;
height:100px; // compensate Footer's height
}
header{ height:50px; }
footer{
position:absolute;
bottom:0;
width:100%;
height:100px; // height of your Footer (unfortunately it must be defined)
}
Try this: Set position: relative on the parent div. Set position: absolute on the inner div(s) and set both the top and the bottom properties; don't set height. The inner div(s) should stretch vertically with the parent, as required. (Doesn't work in IE6 and below unfortunately).
How can I build a fixed footer like facebook application design? Examples with css appreciated.
Duplicate of Facebook like status div
One way is given here:
In HTML:
<div id="container">
<div id="content"></div>
<div id="footer"></div>
</div>
In CSS:
#container {
position:absolute;
min-height:100%;
}
#content {
margin-bottom:100px; /* same as footer height */
}
#footer {
position:absolute;
bottom:0;
height:100px; /* same as content margin-bottom */
}
Edit: That link was based on this which has some exceptions
Facebook's footer stays in place as you scroll. To accomplish this, you'll need HTML like this:
<body>
<div id="content">
[content]
</div>
<div id="footer">
[footer]
</div>
</body>
and CSS like this:
#footer {
position: fixed;
bottom: 0;
width: 100%;
background: #f00;
}
The CSS position: fixed instructs the browser to keep this element's position fixed, regardless of scrolling.
I have found CSS Play a really helpful site.
http://www.cssplay.co.uk/
More specifically, http://www.cssplay.co.uk/layouts/, for layouts.
More examples at CSS Sticky Footer.
Edit: Another example with slightly cleaner CSS