Hi I'm trying to fix a bit of test html to work with opera/chrome. It's using the holygrail box model from matt levine.
In IE and firefox it looks like
correct layout http://img187.imageshack.us/img187/4049/writedn1.jpg
In chrome, opera and safari it pushes the sidebar element down. I've played with the margin and paddings but it still doesn't work. am I missing something?
wrong layout http://img73.imageshack.us/img73/6279/wrongpx8.jpg
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<style type="text/css">
body {
min-width:500px;
padding: 0 106px;
}
#center, #left, #right,#sidebar,#main {
position:relative;
float:left;
}
#center {
width:100%;
background:#CCC;
}
#left {
width:106px;
margin-left: -100%;
right:106px;
background:#C0C;
}
#right {
width:106px;
margin-right: -106px;
background:#CC0;
}
#header{
width:100%;
background:#0CC;
}
#footer{
width:100%;
background:#A0E;
clear:both;
}
#content{
padding-right:330px;
background:#F00;
}
#main{
width:100%;
padding:5px 15px;
}
#sidebar{
width:300px;
margin-right: -300px;
background:#33C;
}
</style>
</head>
<body>
<div id="center">
<div id="header">header</div>
<div id="content">
<div id="main">
copy
</div>
<div id="sidebar">
side
</div>
</div>
<div id="footer">footer</div>
</div>
<div id="left">
left
</div>
<div id="right">
right
</div>
</body>
</html>
I got it to work in both Safari and Firefox (haven't tested the other browsers yet)
Change this:
#content{
padding-right:300px;
background:#F00;
}
#main{
padding:5px 15px;
width: 100%;
margin-right: -30px;
}
Dunno why this works any better than what you have above, but it does :)
If you're looking for premade grid-based layouts, though, I'd suggest BlueprintCSS. I've used it for a bunch of projects, and it's really easy-to-use. It is a fixed layout (not fluid like yours), so that may be a deal-breaker.
Well, I know that min-width doesn't work on the BODY tag, at least in certain versions of IE (I thought it worked in Firefox, though). You might want to try putting your entire page in a DIV tag and setting min-width on that.
Related
I'm just trying to make my website layout. Now I have a problem: right navigation div stays under the Left navigation one. The blue one should be in the same line as the green.
Any suggestions?
I was following this tutorial: http://www.subcide.com/articles/creating-a-css-layout-from-scratch/P6/ and done the same, but it doesn't work as it should be.
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" -->
<html>
<head>
<!-- Svetaines dizainas -->
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="container">
<div id="topmenu">TOPMENU</div>
<div id="topheader">TOP HEADER</div>
<div id="lnav">Left Navigation<div>
<div id="rnav">Right Navigation</div>
<div id="footer">FOOTER</div>
</div>
</body>
</html>
CSS:
body, h1
{
margin:0;
padding:0;
}
#container
{
width:1024px;
margin:auto;
}
#topmenu
{
width: 1024px;
background-color:red;
height:53px;
}
#topheader
{
width:1024px;
height:170px;
background-color:orange;
}
#lnav
{
width:1024px;
background-color:green;
}
#rnav
{
width:373px;
float:right;
background-color:blue;
}
#footer
{
width:1024px;
height:190px;
background-color:pink;
}
#lnav
{
width:1024px;
background-color:green;
}
This shouldn't be 1024 right?
Change it to 651px (from my head) to make it fit.
You could ofcourse put it inside the leftmenu and float it right aswell, (make sure the html of right would be above the content of left). But I wouldn't recommend this.
Arghh my own silly mistake:
<div id="lnav">Left Navigation<div>
I think you can understand what's wrong :D
My HTML looks like the following, without the content though as the following is only needed to answer my question:
<html>
<body>
<div class="container">
<div class="socialmedia"></div>
<div class="navbar"></div>
<div class="mainbody></div>
<div class="footer"></div>
</div>
</body>
</html>
I've been trying to get my footer to remain at the bottom of my webpage, beneath .mainbody. The problem though, is that the footer seems to sit at the bottom of my window only, not at the bottom of the webpage which could extend well below my actual window when I have a lot of content. Right now, I have all the div's above set to position "absolute"; as well the html and body are styled in the following way:
html, body{
height:100%;
margin:0;
padding:0;
}
html { background: url(/img/multiblock.png)repeat center center fixed; }
}
Now, the only way I can get my footer to remain at the bottom of the webpage is to set top:-3998px (or whatever the height of my largest window is). Obviously this won't work once a webpage has enough content on it to expand it past that height. If I set position to relative, it appears at the top of my whole webpage and when positioned absolute it appears at the bottom of the viewable window only. You can check out the website at http://www.edmuncovered.com to see what I mean or to check the rest of the code. Parts of my website include adding content every day or so so I want to make sure the webpage can increase in height with added content, but that the formatting stays the same and the footer obviously stays at the bottom. Any ideas?
I guess this is what you need...
HTML
<div id="container">
<div id="header"></div>
<div id="body"></div>
<div id="footer"></div>
</div>
CSS
html,
body {
margin:0;
padding:0;
height:100%;
}
#container {
min-height:100%;
position:relative;
}
#header {
background:#ff0;
padding:10px;
}
#body {
padding:10px;
padding-bottom:60px; /* Height of the footer */
}
#footer {
position:absolute;
bottom:0;
width:100%;
height:60px; /* Height of the footer */
background:#6cf;
}
http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page
You can try something like this:
CSS:
.socialmedia, .navbar, .mainbody, .footer
{
border: 1px solid grey;
margin-top: 5px;
width: 800px;
}
.socialmedia
{
height: 20px;
}
.mainbody
{
min-height: 980px;
}
.footer
{
height: 25px;
}
Html:
<div class="container">
<div class="socialmedia">Social Media</div>
<div class="navbar">Navbar</div>
<div class="mainbody">Mainbody</div>
<div class="footer">Footer</div>
</div>
Working jsFiddle: http://jsfiddle.net/LrfXr/
I'm going to assume this is a questions similar to the one here: How to Stop Sticky Footer at Content DIV
At which there are a few good answers.
Links on that page:
http://ryanfait.com/resources/footer-stick-to-bottom-of-page/
http://twitter.github.io/bootstrap/examples/sticky-footer.html
Basically you're looking for a footer that attaches itself to the bottom of the viewport but also extends should the content push it off the viewport. Martin Bean and Ryan Fait have the best methods of this. The bootstrap's method is a variation of this method too.
Happy hunting.
Here is the jsFiddle link. Followings are your css and html code:
HTML code
<div class="container">
<div class="socialmedia">Social Media</div>
<div class="navbar">Navbar</div>
<div class="mainbody">Mainbody</br>Mainbody</br>Mainbody</br>Mainbody</div>
<div class="footer">Footer</div>
</div>
CSS
*{
margin:0;
padding:0;
}
body {
background-color:#E4E2E2;
color:#fff;
}
.container {
min-height:100%;
/*position:relative;*/
}
.socialmedia {
background-color:#186301;
padding:10px;
}
.navbar {
background:#A60206;
padding:10px;
min-height:30px;
}
.mainbody {
padding:20px;
background-color:#6D0594;
}
.footer {
position:absolute;
bottom:0;
padding:2%;
background-color:#000;
width:96%;
}
This is working for me:
http://ryanfait.com/resources/footer-stick-to-bottom-of-page/
In short, use this:
CSS
* {
margin: 0;
}
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -4em;
}
.footer, .push {
height: 4em;
}
HTML
<html>
<head>
<link rel="stylesheet" href="layout.css" ... />
</head>
<body>
<div class="wrapper">
<p>Your website content here.</p>
<div class="push"></div>
</div>
<div class="footer">
<p>Copyright (c) 2008</p>
</div>
</body> </html>
Inside my div 'container' there appears to be a larger margin on the left side (larger indent) then there is on the right side. Anyone know why I'm getting this behavior? I have removed the ordered list items so there isn't excessive code to view. That shouldn't impact the question I have regarding the code documented below.
<html>
<head>
<title> Fantastic Hardware/Software Computer Package</title>
<style type="text/css">
body {
text-align:center;
}
ul li{
list-style:none;
}
#right{
float:right;
width: 400px;
}
#left {
float:left;
width: 400px;
}
#container {
align: center;
width: 1024px;
border-width:3px;
border-style:solid;
border-color:#00;
padding:50px;
margin:50px auto;
}
</style>
</head>
<body>
<h1 align="center">Custom Hardware/Software System</h1>
<div id="container">
<div id="left">
<ul>
<li></li>
</ul>
</div>
<div id="right">
<ul>
<li></li>
</ul>
</div>
</div>
</body>
</html>
As you can see in the picture, there is more space on the left than right.
Try this:
Use the below code in your CSS:
*
{
margin:0px;
padding:0px;
}
Hope this solves the problem..!
I create fiddle for your question please have a look on it.
`http://jsfiddle.net/8TS9a/`
In a nutshell, i want a right div float to extend vertically 100%
but it only works when i don't include <doctype> on my html
in today's standard, do i really have to add <doctype>?
This is the result in Internet Explorer:
this is just simple html
<html>
<head>
<style type="text/css">
html, body {
padding:0;
margin:0;
height:100%;
}
#wrap {
background:red;
height:100%;
overflow:hidden;
}
#left {
background:yellow;
float:left;
width:70%;
min-height:100%;
}
#right {
background:pink;
float:right;
width:30%;
min-height:100%;
}
</style>
<body>
<div id="wrap">
<div id="left"> Content </div>
<div id="right"> Side Content </div>
</div>
</body>
</html>
in today's standard, do i really have to add <doctype>?
You don't have to do anything, but the absence of the DOCTYPE is essentially asserting that you conform (in the loosest sense of the term) to an unknown/inconsistent "quirks" standard.
I imagine the solution is as simple as setting the height of the parent container to 100% or to a specific pixel height.
ensure that height is set on the HTML and BODY elements.
ensure that height is set on any parent containers.
Working example: http://jsfiddle.net/7xxFj/
<div id="one">
First column
</div>
<div id="two">
second column
</div>
HTML, BODY { height: 100%; }
#one { height: 100%; width: 30%; float: left; background-color: red; }
#two { height: 100%; width: 70%; float: left; background-color: blue; }
As #BoltClock pointed out in the comments, you probably want a layout that can extend beyond 100%. This requires a little more effort (but still works well within the standard).
This article shows several methods for accomplishing layouts with equal column heights. More methods here.
If you are thinking of considering IE (any version for that matter, lets not digress to this topic), then you are better of specifying the DOCTYPE. I have seen many pages which do not do this properly through IE into the famous Quirks mode.
Use this Code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
html, body {
padding:0;
margin:0;
height:100%;
}
#wrap {
background:red;
height:100%;
overflow:hidden;
}
#right {
background:blue;
float:left;
width:30%;
height:100%;
}
#left {
background:yellow;
float:left;
width:70%;
height:100%;
}
</style>
</head>
<body>
<div id="wrap">
<div id="left"> Content </div>
<div id="right"> Side Content </div>
</div>
</body>
</html>
<style>
div{
height:100px;
}
#wrapper{
position:relative;
}
#navigation {
position:relative;
width:400px;
background-color:black;
float:left;
}
#content{
width:2300px;
background-color:red;
padding-left:500px;
}
#iframe{
background-color:green;
}
</style>
<div id="wrapper">
<div id="navigation">
sss
</div>
<div id="content">
<div id="iframe">
content
</div>
</div>
</div>
In browsers like IE8,FF #content div is coming inline with navigation in IE 7 content div is coming down.
I am looking for solution of this issue ine ie7 Thanks for all your help
had similar problem. got solved the issue thanks to user VinayC. I'm sure this will help u too. solution is relative positioning. check this link: http://snook.ca/archives/html_and_css/position_relative_overflow_ie/
In IE the #content is coming down because the width of that element is greater than the window/body. But I'm not sure if this is same with IE9.
To solve this add a width to the #wrapper that is greater than the width of #navigaton + #content.
#wrapper{
position:relative;
width: 2800;
}
Also why do you have such a long width and padding for the #content?