I have one floating header div set to 1000px inside another div (width 1000px) and followed by a div with a smaller width. The problem is this table inside this div is on the left of the header.
If I add some character above the table, it is ok. Is this a bug?
This works fine in IE and Google Chrome.
<!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>
<title></title>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<style>
#container
{
margin: 0px auto;
width: 1000px;
}
#header
{
margin-top: 15px;
width: 1000px;
float: left;
}
</style>
</head>
<body>
<div id="container">
<div id="header">
aaa
</div>
<div style="width: 900px;">
<table>
<tr>
<td>
the wow
</td>
</tr>
</table>
</div>
</div>
</body>
</html>
The question is not clear. If what you want is to display the table below the header, simply take out the
float: left;
Please make clear what you want.
Related
What I'm trying to do is have a bootstrap like navbar where the actual navbar is around 960px in the center but have the background color span the entire width of the window.
However, when the window is less than 960px in width, and I scroll, the background doesn't go all the way to the end.
Is it possible to make this happen without having custom rules for max-width(960px)?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test Page</title>
<style type="text/css">
#container {
width: 960px;
margin: 0 auto;
}
#nav {
height: 33px;
background-color: #cfcfcf;
}
</style>
</head>
<body>
<div id="nav">
<div id="container">
test
</div>
</div>
</body>
</html>
Thanks in advance!
Edit: Oops. Had an extra in there, though that wasn't the issue.
The height has to be in the inner div (#container).
try
#nav { background-color: #cfcfcf; }
#container {
height:33px;
width:960px;
margin: 0 auto;
}
see http://jsfiddle.net/wYGLj/
You need your nav div to span the entire page.
#nav { width:100%; }
will work in this case.
Your CSS is working as it should. So if you want it to extent the whole length of the screen, create a wrapper to handle that grey element. Like this.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test Page</title>
<style type="text/css">
#wrapper {
width: 100%;
margin: 0;
padding: 0;
background-color: #cfcfcf;
}
#container {
width: 960px;
margin: 0 auto;
}
#nav {
height: 33px;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="nav">
<div id="container">
test
</div>
</div>
</div>
</body>
</html>
I added
body {
min-width:960px;
}
which seemed to fix the problem.
I'm trying to float two divs side by side no matter what the size of the screen is. At the moment in IE 7 if I resize the windows the one div drops below the other. I think its because div2 contains a table and as soon as the edge of the window hits the table it drops below the div1.
What I currently have works in IE9 and Firefox but it needs to work in IE6+7. I tried this solution CSS floats - how do I keep them on one line? but it didn't seem to help. Again I think this maybe due to the content that is inside these divs.
How to replicate it?
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
<style>
#wrapper {
min-width:510px;
width: auto !important;
width: 510px;
border: 1px solid red; }
#div1 {
float:left;
color:blue;
width:500px;
border: 1px dashed purple;
height: 400px;}
#div2 {
margin-left:505px;
border:1px dashed purple;}
#div2 table{border: 1px dotted green;}
</style>
</head>
<body>
<div id="wrapper">
<div id="div1" >
Sometimes I contain a table and sometimes I contain an object. Bother of which displays a chart
</div>
<div id="div2">
<table>
<tr>
<td> I am normally a report
asdfasdfads
dsafasdfasdfasdfasdfadsfasdfasdadfadsfadfsdfasdfsdffGreat Thanks, today has been quiet hot but somehow a bit cooler than this time last year.
</td>
<td></td>
</tr>
</table>
</div>
</div>
</body>
</html>
A live example can be found here http://jsbin.com/awijew/11
Remove the margin-left: 505px; on div2
give width as "%"
Like
#div1 {
float:left;
color:blue;
width:48%;
border: 1px dashed purple;
height: 400px;
}
#div2 {
width:48%;
border:1px dashed purple;
float:left;
}
#wrapper{
display: flex;
justify-content: space-between;
border: 2px dotted red;
padding: 20px;
}
#wrapper div{
width: 48%;
border: 2px dotted purple;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS Bin</title>
</head>
<body>
<div id="wrapper">
<div id="div1" >
Sometimes I contain a table and sometimes I contain an object. Bother of
which displays a chart
</div>
<div id="div2">
<table>
<tr>
<td> I am normally a report
asdfasdfads
dsafasdfasdfasdfasdfadsfasdfasdadfadsfadfsdfasdfsdffGreat Thanks,
today has been quiet hot but somehow a bit cooler than this time last
year.
</td>
<td></td>
</tr>
</table>
</div>
</div>
</body>
</html>
I do have div with a fixed height, containing an Image higher than the div's height.
I want to position this image in the middle of the div, and I use jquery-ui position().
However the image is clipped, the contents outside the div is not shown. I tried the overflow-y: visible (overflow-x must be hidden). I want the image to be completely visible I think I'm missing something trivial.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="Content-type" content="text/html; charset=UTF-8">
<title>Jeroen's Plaatjes Presentator</title>
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen" charset="utf-8">
<script src="js/jquery-1.5.1.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery-ui-1.8.10.custom.min.js" type="text/javascript" charset="utf-8"></script>
<script>
$(function() {
$('#focus_img').position({my: 'center center', at: 'center center', of: '#panel_1'});
});
</script>
</head>
<body>
<div id="wrapper">
<div class="scroll">
<div class="panel" id="panel_1">
<img src="images/middle/kameleon.png" alt="kameleon" id="focus_img" style="{width:239 height:160}"/>
</div>
</div>
</div>
</div>
<div id="content" style="margin-top:50px;margin-left:auto;">
<table width="100%">
<tr><td id="left" width="50%"><div class="stage"></div>
</td><td id="bright" width="50%"></td></tr>
</table>
</div>
</body>
</html>
the css looks like:
#wrapper {
padding-top: 150px;
}
#slider {
position: relative;
}
.scroll {
overflow-x: hidden;
overflow-y: visible;
width: 100%;
margin: 0 auto;
position: relative;
border: 2px solid black;
height: 50px;
}
Overflow is tricky business. One option is to increase the div height to fit your image, then either display: block; or float it.
Have you tried setting the overflow for panel_1?
I am making a css site and I want to look like that:
3 vertical divs. LEFT CENTER RIGHT. In the center div is the site content, and I want the left and right div to fill the space between the center and the browser borders.
Here is my code.
#container
{
width:100%;
background-color:#000;
}
.center
{
width:1000px;
height:400px;
background-color:#F90;
margin: 0px auto;
overflow: auto;
}
.spacer-left
{
width:100%;
height:400px;
background-color:#F90;
float:left;
}
.spacer-right
{ width:100%;
height:400px;
background-color:#F90;
}
And here is the HTML:
<!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=windows-1251" />
<title>Untitled Document</title>
<link href="css.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
<div class="spacer-left"></div>
<div class="center" style="background-color:#F30;"></div>
<div class="spacer-right"></div>
<div style="clear:both"></div>
</div>
</body>
</html>
I've try with 2 divs and there was no problem. The left with float:left and width in pixels and right one with 100% width without float. It worked. But how to make it with 3 divs. Thanks in advance!
Thank you for the help Sebastian but I figured out other way.
This is how the code looks now and it works.
#container
{
width:1000px;
background-color:#000;
margin:0 auto;
}
.center
{
width:100%;
height:400px;
background-color:#F90;
margin: 0px auto;
overflow: auto;
}
.spacer
{
width:50%;
height:400px;
background-color:#F90;
float:left;
}
.head_warp
{
width:100%;
display:block;
height:400px;
margin:0 auto;
padding:0;
position:absolute;
top: 0;
left: 0;
text-align:center;
z-index:-9999;
}
and the HTML
<!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=windows-1251" />
<title>Untitled Document</title>
<link href="css.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="head_warp">
<div class="spacer"></div>
<div class="spacer" style="background-color:#F06"></div>
</div>
<div id="container">
<div class="center" style="background-color:#F30;"></div>
</div>
</body>
</html>
Thank you for the help one again. I will write here again if there is a problem with my solution.
Update: a different alternative to the answer below, using three divs and z-index.
http://jsfiddle.net/SebastianPataneMasuelli/mzvB4/1/
if you are trying to make a site with the content in the center div, you can replicate that layout using simply:
<body>
<div class="center">center</div>
</body>
with the css:
html {height: 100%; }
.center { width:750px; margin: 30px auto; height: 100%; }
play with it here: http://jsfiddle.net/SebastianPataneMasuelli/mzvB4/
from the class names .spacer_left and .spacer_right i'm assuming that those divs are empty spacers and not necessary.
this is a good resource for base css layouts: http://www.csseasy.com/
I have an extremely simple page that isn't displaying properly in IE6. In this browser, the left nav pushes down a table that's in the content area. Can anyone help me get the table to stay at the top of its container where it should be, rather than getting pushed down by content in the left div?
Here's the html code for the page:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css" media="screen">
body
#nav
{
float: left;
width: 180px;
background-color: #999;
}
#content
{
margin-left: 210px;
background-color: #999;
}
</style>
</head>
<body>
<div id="nav">
<div>left content</div>
</div>
<div id="content">
<table style="width: 100%; background-color: #666666">
<tr><td>table</td>
</tr>
</table>
</div>
</body>
</html>
Here's a url so you can see what it looks like:
http://www.morganpackard.com/cssTest.html
Give your table a width of 99% instead.
Another solution is to make the table float left and have a width of 100%....
You could just make the content float left too:
#content
{
float:left;
...
}
don't forget to adjust the margin-left though
Other solution that doesn't quite work for other browsers though:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css" media="screen">
#nav
{
float: left;
width: 180px;
background-color: #999;
}
#content
{
float: right;
}
</style>
</head>
<body>
<div id="container">
<div id="nav">
<div>left content</div>
</div>
<div id="content">
<table style="width: 100%; background-color: #666666">
<tr><td>table</td>
</tr>
</table>
</div>
</div>
</body>
</html>
Notice the container and the float:right;
If all else fails, go with a table layout *ducks and covers* from the CSS purists:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style type="text/css" media="screen">
#nav
{
width: 180px;
background-color: #999;
}
#content
{
background-color: #999;
}
</style>
</head>
<body>
<table style="width:100%;">
<tr>
<td id="nav">
<div>left content</div></td>
<td id="content">
<table style="width: 100%; background-color: #666666">
<tr><td>table</td>
</tr>
</table></td>
</tr>
</table>
</body>
</html>