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>
Related
I am a beginner to HTML and CSS. i have some knowledge of javascript, not jquery and also responsive design.
So I want to make a 3 column grid aligned to center and each with 33.33% width. Also a little space between each horizontally and some space on either side. but i can seem to align it to the center.
here is my html. I also want it to be Responsive. It should be reduced to two columns then to one and stuff like that. How could i achieve this?
Here is my 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>
<link rel="stylesheet" href="Home.css" type="text/css" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<div class="layout" align="center">
<div class="success"> </div>
<div class="success"> </div>
<div class="success"> </div>
<div class="success"> </div>
<div class="success"> </div>
<div class="success"> </div>
<div class="success"> </div>
</div>
</body>
</html>
CSS
#charset "utf-8";
/* CSS Document */
.success {
display:inline-block;
background: tomato;
padding: 5px;
width: 200px;
height: 150px;
margin-top: 10px;
line-height: 150px;
color: white;
font-weight: bold;
font-size: 3em;
text-align: center
}
.success li:last-child {
float: none;
width: auto;
}
.layout {
width:75%;
}
You need to start again.
Basically your html structure needs to reflect your 3 column layout. Usually this is achieved with <div> tags.
so something like:
<div id="content">
<div id="contentleft">
your first column content is here
</div>
<div id="contentcenter">
the stuff for the middle goes here
</div>
<div id="contentright">
etc. etc. etc.<br>
...
</div>
</div>
then your .css can do something along the following lines:
#content {
width: 900px;
}
#contentLeft {
width:33%;
float:left;
}
#contentcenter {
width:33%;
padding:1%;
float:left;
}
#contentright {
width: 33%;
float:right;
}
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.
How would I change this to make the middle div expand vertically to fill the white space?
<!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></title>
<style type="text/css">
body,td,th {
font-family: Tahoma, Geneva, Verdana, sans-serif;
}
html,body {
margin:0;
padding:0;
height:100%; /* needed for container min-height */
}
#container {
position:relative; /* needed for footer positioning*/
margin:0 auto; /* center, not in IE5 */
width:100%;
height:auto !important; /* real browsers */
height:100%; /* IE6: treaded as min-height*/
min-height:100%; /* real browsers */
}
#header {
height: 150px;
border-bottom: 2px solid #ff8800;
position: relative;
background-color: #c97c3e;
}
#middle {
padding-right: 90px;
padding-left: 90px;
padding-top: 35px;
padding-bottom: 43px;
background-color: #0F9;
}
#footer {
border-top: 2px solid #ff8800;
background-color: #ffd376;
position:absolute;
width:100%;
bottom:0; /* stick to bottom */
}
</style>
</head>
<body>
<div id="container">
<div id="header">
Header
</div>
<div id="middle">
Middle
</div>
<div id="footer">
Footer
</div>
</div>
</body>
</html>
You can't get the actual div to expand to fill a gap without Javascript, but you can easily make it appear to do so. Move your rule background-color:#0F9; from #middle to #container. This will give you the behaviour you require (it will fill the gap when there is minimal content, and when there is lots of content it will expand down, pushing the footer with it).
If however you want the Javascript solution, the following code will work. Simply put this in your HTML head section:
<script type="text/javascript">
window.onload = function() {
var mid = document.getElementById('middle');
var foot = document.getElementById('footer');
mid.style.height = ((foot.offsetTop+foot.clientHeight)-(mid.offsetTop+mid.clientHeight))+'px';
};
</script>
This is my backup answer:
<!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></title>
<style type="text/css">
body,td,th {
font-family: Tahoma, Geneva, Verdana, sans-serif;
}
html,body {
margin:0;
padding:0;
height:100%; /* needed for container min-height */
}
#container {
height: 100%;
}
#container #header {
height: 50px;
background-color:#0F6;
}
#container #middle {
background-color: #66F;
}
#container #footer {
height: 20px;
background-color: #FF3;
}
</style>
</head>
<body>
<!-- Apology note to perfectionists: I'm sorry for using tables, but see this:
http://stackoverflow.com/questions/1703455/three-row-table-less-css-layout-with-middle-row-that-fills-remaining-space
A layout done with this table would be impossible with CSS. -->
<table width="100%" border="0" cellspacing="0" cellpadding="0" id="container">
<tr id="header">
<td>h</td>
</tr>
<tr id="middle">
<td>m</td>
</tr>
<tr id="footer">
<td>f</td>
</tr>
</table>
</body>
</html>
#footer {
clear: both;
}
That should to the trick. The footer should alway appear below the column with the most content.
Personally I always add a CSS clear class in my templates and use them as breaks
.clear {clear:both;}
Then:
<div id="container">
<div id="header">
Header
</div>
<div id="middle">
Middle
</div>
<br class="clear" />
<div id="footer">
Footer
</div>
</div>
Tables will cause you more problems than they solve.
I think what you are looking for is sometimes called a sticky footer.
This page explains how it is done. What you would do is put your header and expanding content inside the wrapper he mentions.
I hope this helps you get your layout.
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>
I've got a parent div floated left, with two child divs that I need to float right.
The parent div should (if I understand the spec correctly) be as wide as needed to contain the child divs, and this is how it behaves in Firefox et al.
In IE, the parent div expands to 100% width. This seems to be an issue with floated elements that have children floated right. Test page:
<!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" lang="en" xml:lang="en">
<head>
<title>Float test</title>
</head>
<body>
<div style="border-top:solid 10px #0c0;float:left;">
<div style="border-top:solid 10px #00c;float:right;">Tester 1</div>
<div style="border-top:solid 10px #c0c;float:right;">Tester 2</div>
</div>
</body>
</html>
Unfortunately I can't fix the width of the child divs, so I can't set a fixed width on the parent.
Is there a CSS-only workaround to make the parent div as wide as the child divs?
Here's a solution which makes inline-block work on IE6 as at http://foohack.com/2007/11/cross-browser-support-for-inline-block-styling/ to make the elements behave more like right-floated <div>s:
<!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" lang="en" xml:lang="en">
<head>
<title>Float with inline-block test</title>
<style type="text/css">
.container {
border-top: solid 10px green;
float: left;
}
.tester1,
.tester2 {
float: right;
}
.tester1 {
border-top: solid 10px blue;
}
.tester2 {
border-top: solid 10px purple;
}
</style>
<!--[if lte IE 7]>
<style type="text/css">
.container {
text-align: right;
}
.tester1,
.tester2 {
float: none;
zoom: 1; display: inline;/* display: inline-block; for block-level elements in IE 7 and 6. See http://foohack.com/2007/11/cross-browser-support-for-inline-block-styling/ */
}
</style>
<![endif]-->
</head>
<body>
<div class="container">
<div class="tester1">Tester 1</div>
<div class="tester2">Tester 2</div>
</div>
</body>
</html>
I came up with a solution using text-align: right and display: inline.
Try this:
<div style="border-top:solid 10px #0c0; float: left;">
<div style="margin-top: 10px; text-align: right;">
<div style="border-top:solid 10px #c0c; display: inline;">Tester 2</div>
<div style="border-top:solid 10px #00c; display: inline;">Tester 1</div>
</div>
</div>
Notice I had to switch the order of the "tester" boxes in the markup to show up in the same way as your example. I think there is an alternative that margin-top on the new container, but I don't have time looking into right now.
If you want cleaner styling for all other browsers try this:
<div style="border-top:solid 10px #0c0; float: left;">
<div style="float: right;">
<div style="border-top:solid 10px #c0c; float: left;">Tester 2</div>
<div style="border-top:solid 10px #00c; float: left;">Tester 1</div>
</div>
</div>
There are some different issues that can come up when you want to layout stuff around those boxes. However, I think those issues will be much easier to solve than this one.
Hope this was helpful for you.
I couldn't come up with a CSS-only solution that fits your requirements, but if you want to use a JavaScript solution, maybe the following code can help? I did not alter the style of the divs, I only added the IDs main, sub1, and sub2 to your divs.
var myWidth = document.getElementById('sub1').offsetWidth + document.getElementById('sub2').offsetWidth;
document.getElementById('main').style.width = myWidth;
I had the same problem and solved in by positioning the child element (which I wanted to float right) with position:absolute and right:0. I gave the parent element enough right padding to make room for the child element... Worth a shot, might not work for all applications!
What about using a single-cell table instead of the outer div? It may need some more work to have everything aligned properly, but the table doesn't expand.
Something you could start with is this:
<DIV style="BORDER: #0c0 10px solid; FLOAT: left; MARGIN-LEFT: 100%;">
<DIV style="BORDER: #00c 10px solid;FLOAT: right;">
Tester 1
</DIV>
<DIV style="BORDER: #c0c 10px solid;FLOAT: right;">
Tester 2
</DIV>
</DIV>
The result of that seems to be at least in the ballpark of what you're looking for. Obviously, you'd want to tweak it for your needs, and probably add some css logic to only apply it to browser < IE 7.
If that's not exactly what you're looking for, try playing with some negative margins.
Firstly, why aren't you using inline styles?
I'd use this to target IE with a separate css file:
<!--[if lt IE 7]>
<link rel="stylesheet" href="ie6.css" type="text/css" />
<![endif]-->
I know this isn't a direct question, but IE is ALWAYS a pain to deal with! Most designers/developers that I know will make a totally new stylesheet for IE.
A very hacky but a CSS only solution that works okay in IE, chrome and FF.
I took kaba's solution - but the problem was, it works okay in IE but all the other browsers show a 4px space between the 2 child divs. The space remains as 4px even if the content on both the divs expand. So to fix that I've used IE conditional statements. I doesn't look like the best code in the world but it gets the job done.
<!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" lang="en" xml:lang="en">
<head>
<title>Float test</title>
</head>
<body>
<div style="border-top:solid 10px #0c0; float: left;">
<div style="border-top:solid 10px #00c; text-align: right;">
<div style="border-top:solid 10px #c0c; display: inline;">Tester2</div>
<div style="border-top:solid 10px #00c; display: inline;margin-left:-4px">
<!--[if gte IE 5]>
<div style="border-top:solid 10px #00c; display: inline;margin-left:4px">
<![endif]-->
Tester1
<!--[if gte IE 5]>
</div>
<![endif]-->
</div>
</div>
</div>
</body>
</html>