| View previous topic :: View next topic |
| Author |
Message |
Liana
Joined: 12 Feb 2006
Posts: 6
|
 Posted: Tue Feb 14, 2006 6:35 am Floating? |
 |
|
|
This is me trying to run before I can walk again, as only a week or two ago I'd never heard of CSS (I just about knew what HTML was  ), but I'd really appreciate it if someone could be so kind as to give me some advice without laughing too hard at my pathetic attempt (see below).
I'm trying to make a box with 3 boxes sitting in side of it - 2 little ones over to the left on top of each other, and one long one over to the right next to them.
It looks fine in IE6 when the browser window is fully open, but when I shrink the window it's a disaster! Ditto if I put a DTD in - disaster. I'm guessing it could be a bit of a mess in other browsers too.
If it's possible to give me some guidance on how to solve this problem I'd be really grateful.
I feel a bit guilty asking for help as I'm no where near a standard yet where I'm going to be able to contribute to this forum!
| Code: |
<html>
<head>
<style>
body
{background-color: #000033;
margin-top: 0px;
margin-bottom: 0px;
border: 0px;
padding: 0px;}
div.main
{position: relative;
top: 5%;
margin-left: 34%;
margin-right: 34%;
height: 75%;
border: 3px solid red;
background-color: black;}
div.box1, .box2,
{background-colour: black;
margin-top: 15px;
margin-left: 8px;
margin-right: 10px;
border: 3px solid red;
width: 43%;}
div.box1
{height: 18%;
float: left;}
div.box2
{height: 50%;
float: right;}
</style>
</head>
<body>
<div class="main">
<div class="box1"></div>
<div class="box2"></div>
<div class="box1"</div>
</div>
</body>
</html>
|
Thanks for reading
L |
|
Corey Bryant
Site Admin
Joined: 15 May 2004
Posts: 8301
Location: Castle Pines North, CO USA
|
| Posted: Tue Feb 14, 2006 10:49 am |
|
|
|
Thanks for the code, I think I understand what you are trying to do,
| Code: |
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style>
body
{background-color: #000033;
margin-top: 0px;
margin-bottom: 0px;
border: 0px;
padding: 0px;}
div.main
{position: relative;
top: 5%;
margin-left: 34%;
margin-right: 34%;
height: 75%;
border: 3px solid red;
background-color: black;}
div.box1, .box2
{background-colour: black;
margin-top: 15px;
margin-left: 8px;
margin-right: 10px;
border: 3px solid red;
width: 43%;}
div.box1
{height: 18%;
float: left;}
div.box2
{height: 50%;
float: right;
clear: right}
</style>
</head>
<body>
<div class="main">
<div class="box1"></div>
<div class="box2"></div>
<div class="box1"></div>
</div>
</body>
</html> |
and see if that helps.
_________________
Corey
Loud Commerce | LoudHost | Toll Free Solutions |
|
Liana
Joined: 12 Feb 2006
Posts: 6
|
| Posted: Tue Feb 14, 2006 11:05 am |
|
|
|
Hey Corey
Thanks so much for taking the time to look at it for me.
If I take the DTD out of yours it is a big improvement on mine - in that I can shrink the browser window without it going insane. But with the DTD in it still doesn't work (though it's not quite as bad - the boxes just get all squished up the top of the window really tiny).
Tis weird. I know not what to do :/ |
|
Corey Bryant
Site Admin
Joined: 15 May 2004
Posts: 8301
Location: Castle Pines North, CO USA
|
| Posted: Tue Feb 14, 2006 11:11 am |
|
|
|
Well keep in mind that you are only using about 32% of the browser space - so that is not a lot at all
_________________
Corey
Loud Commerce | LoudHost | Toll Free Solutions |
|
Liana
Joined: 12 Feb 2006
Posts: 6
|
| Posted: Tue Feb 14, 2006 5:15 pm |
|
|
|
Ok, thanks.
I've changed it now so that the main box is a fixed width and this seems to work a lot better. I changed the foats a bit as well.
| Code: |
<html>
<head>
<style>
body
{background-color: #000033;
border: 0px;
padding: 0px;}
div.main
{position: absolute;
top: 15px;
left: 50%;
margin-left: -150px;
width: 310px;
height: 500px;
background-color: red;
border: 3px solid white;}
div.left
{float: left;}
div.box1
{background-colour: black;
margin-top: 8px;
border: 3px solid white;
height: 100px;
width: 134px;
margin-left: 10px;}
div.box2
{background-colour: black;
margin-top: 8px;
border: 3px solid white;
width: 134px;
height: 300px;
margin-left: 10px;
float: left;}
</style>
</head>
<body>
<div class="main">
<div class="left">
<div class="box1"></div>
<div class="box1"></div>
</div>
<div class="box2"></div>
</div>
</body>
</html>
|
|
|
Corey Bryant
Site Admin
Joined: 15 May 2004
Posts: 8301
Location: Castle Pines North, CO USA
|
|
Liana
Joined: 12 Feb 2006
Posts: 6
|
| Posted: Tue Feb 14, 2006 5:30 pm |
|
|
|
Ok yes, I think I'm starting to see how they can be problematic!
L |
|
errorlevel_03
Joined: 11 Feb 2006
Posts: 27
|
| Posted: Tue Feb 14, 2006 6:41 pm |
|
|
|
| Why not just use a table for this? |
|
Corey Bryant
Site Admin
Joined: 15 May 2004
Posts: 8301
Location: Castle Pines North, CO USA
|
|
|
Forum Home
FAQ
Search
Memberlist
Register
Profile
Log in to check your private messages
Log in
