Hi all I'm trying to build a layout using CSS and I'm coming up against a strange problem. Well strange for me. I have 3 divs a Header, a Footer and a MainContent area. Header and Footer must remain at a constant width of 100% while the MainContent area must be fixed centrally at 996px; This is all fine however when I resize the browser window to a width lower than 996px and then scroll the content of the window right the 100% header and footer seem to be truncated and are no longer 100%. I've knocked up a little bare-bones script to illustrate the issue (styles inline to keep it compact). I know I can add overflow:hidden to each of the containers in order to turn off the scrollbars when to window is resized. I've also written a small piece of jQuery to force the div's back to
the width, if the width drops below a certain width. However my question is around the CSS, is there a better pure CSS fix for this issue? Or can anybody explain why this happens?
Thankyou in advance!
DotsC
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>div width test</title>
</head>
<body style="border:none; margin:0; padding:0; height:100%; width:100%">
<div id="header-content" style="width:100%; margin:0; padding:0; background-color:#0000ff; height:50px"></div>
<div id="main-content" style="width:996px; margin:0; padding:0; background-color:#ff00ff; height:250px; margin:auto">
<div id="inner-content">
CONTENT OF THE PAGE HERE
</div>
</div>
<div id="footer-content" style="width:100%; margin:0; padding:0; background-color:#00ffff; height:70px"></div>
</body>
I'm not completely clear on your issue, but you can set min-width:996px; on the header and footer to keep them at least as wide as the content.
Try this, and please use HTML5's doctype.
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<style type="text/css">
body{margin:0;text-align:center;}
.header,.content,.footer{text-align:left;clear:both;margin:0 auto;}
.header,.footer{width:100%;background-color:blue;height:128px;min-width:996px;}
.content{width:996px;height:512px;background-color:red;}
</style>
<title>Index</title>
</head>
<body>
<div class="header">
Header stuff here
</div>
<div class="content">
Page content stuff here
</div>
<div class="footer">
and your footer...
</div>
</body>
</html>
Related
I'm very new to the html5/css universe.
I'm trying to do something very basic and cannot comprehend why I'm getting the results I am. I would like to add a sidebar to the side of my content. I'm doing this by adding a 310px margin to my content and putting floating my side-content there. Easy!
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
div.sidebar{float:left;width:300px;padding:0;background-color:yellow;}
div.content{margin-left:310px;background-color:green;}
</style>
</head>
<body>
<div class="sidebar">
<h1>Sidebar</h1>
</div>
<div class="content">
<h1>Content</h1>
</div>
</body>
</html>
But something odd is happening, there seems to be a 1em padding above and below the sidebar (yellow), but not the content (green). As a consequence the titles "Sidebar" and "Content" are not aligned. I'm just wondering why the float:left automatically added what seems to be padding? And can this padding be removed? padding:0; seems to have no effect.
try this
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
body,html{margin:0;padding:0px}
div.sidebar{display:inline-block;float:left;width:300px;padding:0;background-color:yellow;}
div.content{margin-left:10px;display:inline-block;float:left;background-color:green;}
</style>
</head>
<body>
<div class="sidebar">
<h1>Sidebar</h1>
</div>
<div class="content">
<h1>Content</h1>
</div>
</body>
</html>
Every browser has its own default ‘user agent’ stylesheet, that it uses to make elements appear more legible. For example, most browsers by default make links blue and visited links purple, give tables a certain amount of border and padding, apply variable font-sizes to H1, H2, H3 etc. and a certain amount of padding to almost everything. The padding your are having is because of default browser setting. Try a global reset for elements.
eg: * {margin:0;padding:0}
I need to make my footer stay on the bottom but also have it not interfere with my content. As seen in the jfiddle, the blue box interferes with the footer. After looking through all the current threads and trying to fix my CSS and HTML, I could not find my solution. I tried changing the position to fixed, adding some padding, etc. Below is my code:
http://jsfiddle.net/9A2gL/8/
Basically I have:
<html><div id="wrapper"><header></header>
<body></body>
<footer></footer></div></html>
I do have floating divs but I used clearfix so clear: both;
Also, please read this: I do have a valid HTML structure but jsfiddle doesn't recommend the tags to be placed. Please focus on the floating aspect as when I take float:right;in the CSS off of the .news it is working. When I remove the code to make the footer stick at the bottom of the page, it also works.
Your HTML Mark is Messed Please first of all W3C Stabdards, and correct your HTML Markup some thing like this
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>
<header></header>
<footer></footer>
</body>
</html>
Sencond for your footer please apply clearfix class there after proper markup or just
.Clear{
clear:both;
}
You are good to go (y).
I understand it was a fiddle (THANK YOU!), but your HTML tags are out of place. That being said, the image I see from your fiddle is as follows
<div id="wrapper">
<div id="container">
<!-- REMOVED body HTML tag-->
<div id="content">...</div>
<aside>
<div class="advert">..</div>
<div class="news">..</div>
</aside>
<!-- End Container -->
</div>
<div class="clearfix">..</div>
<footer>..</footer>
<!--End Wrapper-->
</div>
edit
Add bottom margin to your aside.
The clearfix div should be added before the end div of container.
When I shrink the browser width I expect the header div to shrink along with the browser and take up the entire width of the page. Instead the div stops at the browser width and then there is blank space to the right and a horizontal scroll bar. This seems to be a problem with the way I'm using bootstrap but I can't figure it out. Any help appreciated
I'm using the latest minified bootstrap css in my project and have completely simplified my layout below.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css" />
<link rel="stylesheet" type="text/css" href="bootstrap.min.css" />
</head>
<body>
<div class="row">
<div class="header">
<div class="container">
<p>Lorem ipsum dolor sit amet</p>
</div>
</div>
</div>
</body>
</html>
css:
body {
background-color: #CDE0E4;
width: 100%;
}
.header {
position: relative;
height:120px;
background-color:#CDE0E4;
box-shadow: 0 0px 15px #272727;
}
Thanks
What you need is fluid layout (see the docs). This term means that your content takes most available width and is resized when browser window is resized. In this case you should use .container-fluid and .row-fluid instead of their unsuffixed versions.
But you are misusing some of Bootstrap's classes.
.row
Is used when you want to create a multi-column layout. For this you have .span* classes to use inside it (see the docs for examples).
.container
Is used when you want your content to have a white space on the sides (it will be 20px for .container-fluid and maximum available for .container).
.header
If you are using HTML5 (which you do by declaring <!doctype html>), why not to use <header> instead of <div class="header">?
<div class="container">
should come at the top. Row is nested inside container and finally the column is nested inside row. You have reversed the order. That is one problem with your code.
I'm currently trying to make a div that is 100% as wide as the whole screen. And I did it by writing the code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>100% width</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<style type="text/css">
html,body {
padding:0px;
margin:0px;
width:100%;
}
</style>
</head>
<body>
<div style="background-color:yellow;">
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</div>
</body>
</html>
It works fine in normal zoom settings but when I do max zoom in (FireFox 6.0.2) the letters inside the div outgrows the yellow box. Is there a way for the yellow box to extend to the end of the window as well?
Thanks.
You can force the really long word to wrap with:
word-wrap: break-word;
in your div style.
Does it really matter what happens at maximum zoom though?
Option 1
If you want to keep the text within the yellow box try adding this CSS styling.
div {word-wrap: break-word;}
It will cause the text to go to the next line rather than continue.
Option 2
OR you could try hiding the content that goes past the div border using CSS styling
div {overflow:hidden;}
I need to put two divs side by side. First div should have constant width, second take rest free space. Both of the div should has the same height but at least should takes all browser screen. I have written the following code:
<head id="Head1" runat="server">
<title>My Testing page</title>
<style type="text/css">
#mainDiv { height:100%;}
#leftDiv {float:left; width:200px; height:100%;}
#rightDiv { height:100%; }
</style>
</head>
<body>
<div id="mainDiv">
<div id="leftDiv"></div>
<div id="rightDiv"></div>
</div>
</body>
But height of the right div is always set to 100% of browser screen, Even if content of this div is bigger. I would like have resizable height of those divs.
As far as I know height:100% would act as a fixed height according to the browser's height.
so why dont you put
min-height:100%.
This should work but I havent tested it myself tbh.