PDA

View Full Version : Possible with CSS? Margins and Floats



spadez
Sep 15th, 2009, 06:18 PM
Hi,

My current code is designed to have a flexible number of columns depending on the width of the screen. It is just divs with a left and right margin:

HTML:


<!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>Untitled Document</title>

<link rel="stylesheet" type="text/css" href="css.css" />
</head>

<body>

<div><img src="1.jpg" alt="Angry face" title="Angry face" /></div>
<div><img src="1.jpg" alt="Angry face" title="Angry face" /></div>
<div><img src="1.jpg" alt="Angry face" title="Angry face" /></div>
<div><img src="1.jpg" alt="Angry face" title="Angry face" /></div>
<div><img src="1.jpg" alt="Angry face" title="Angry face" /></div>
</body>
</html>

CSS:

div{
width:120px;
height:90px;
float:left;
background:#999999;
margin-left:3%;
margin-right:3%;
margin-bottom:13px;
border-style:solid;
border-width:1px;
border-color:#e2e2e2;
}


The trouble is, the right column isnt spaced correctly to the right side of the browser. Ive included an image to show more accuratly what im hoping to achieve.

zip_000
Sep 15th, 2009, 07:00 PM
I would probably put all of the divs in a large container div with width:100%. Then adjust the spacing of the inner divs.

Try this:
CSS:

#innerdiv{
width:120px;
height:90px;
float:left;
background:#999999;
margin-left:5%;
margin-right:5%;
margin-bottom:13px;
border-style:solid;
border-width:1px;
border-color:#e2e2e2;
}

html:

<!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>Untitled Document</title>

<link rel="stylesheet" type="text/css" href="stylesheet.css" />
</head>

<body>
<div style="width:100%;">
<div id="innerdiv"><img src="1.jpg" alt="Angry face" title="Angry face" /></div>
<div id="innerdiv"><img src="1.jpg" alt="Angry face" title="Angry face" /></div>
<div id="innerdiv"><img src="1.jpg" alt="Angry face" title="Angry face" /></div>
<div id="innerdiv"><img src="1.jpg" alt="Angry face" title="Angry face" /></div>
<div id="innerdiv"><img src="1.jpg" alt="Angry face" title="Angry face" /></div>
</div>
</body>
</html>

spadez
Sep 16th, 2009, 10:51 AM
Hi,

I tried this code, but it still leaves with the same problem. Is there other options?

zip_000
Sep 16th, 2009, 07:17 PM
Oh, one thing to note - I changed the name of your stylesheet. I meant to change it back before I posted it, but overlooked it.

Make sure that isn't the problem.

spadez
Sep 16th, 2009, 07:59 PM
Hi. Yes I did notice that and make the change. It still didn't seem to make a difference from the original, should it be working?

zip_000
Sep 16th, 2009, 08:08 PM
Can you provide a link?

spadez
Sep 16th, 2009, 08:43 PM
Sure, here is a link of it live: LINK (http://www.zombiemod.com/wip/wip/div2.html)

Its the same code you gave me except it has an additional div at the top and ive moved the outer div css to the css file.

zip_000
Sep 16th, 2009, 09:09 PM
OK then, either I'm misunderstanding how you want this to look or there is something with your browser.

Here's what it looks like on mine:
http://library.savannahstate.edu/testing/delete/example.jpg

spadez
Sep 16th, 2009, 09:18 PM
Hi, thank you for getting back to me. The problem I have is that the spacing between the right most image and the right of the window is not the same as the spacing from the left most image and the left side of the browser. Basically theres more space on the right.

Ive tested this in IE7 and FF and it looks like the picture attached. In your picture it looks right, but when happens if you change the window size, does the spacing on the right equal the spacing on the left?

ckeyrouz
Sep 16th, 2009, 09:40 PM
change this rule to the following:


#outerdiv {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:#999999 none repeat scroll 0 0;
width:98%;
padding-left:7%;
}

zip_000
Sep 16th, 2009, 09:53 PM
If I change the window size then the boxes get pushed down, and sometimes the spacing isn't like you want it.

The way I see it you basically have two choices:
1) Let things float so that they best fit the screen of whoever is looking at the site.

2) Set an exact size for your page - probably using whatever is the most common screen size and resolution - and everyone else will just have to scroll.


In general, number 1 is the way to go in my opinion.

But if you want number 2, try this code for your outerdiv:

#outerdiv {
width:1000px;
margin-left:auto;
margin-right:auto;
}

spadez
Sep 16th, 2009, 09:59 PM
Hi

Thank you for the reply. Ive tried this, however I didnt have any luck with this code either. This left me with the same problem of unequal side spacing, except this time the left side gap was always bigger than the right, instead of the other way around. This is in IE7.

http://www.zombiemod.com/wip/wip/div2.html

zip_000
Sep 16th, 2009, 10:39 PM
Spadez,

Did you try my outerdiv code?

I only see ckeyrouz's outerdiv code.

spadez
Sep 16th, 2009, 10:45 PM
Hi, Sorry I guess you posted while I was typing. Is option 1 what we have been trying? Option 2 isnt really an option for me, my whole site idea is based around flexibility.

Ive been trying to look into deviantarts code because they achieve what ive been looking for, but the code is complicated and I cant figure out how its done.

spadez
Sep 16th, 2009, 10:58 PM
This is a stripped down version of the code deviantart uses to do it


<div class="tt-a">
<span class="tt-w">
<a href="Link" title="Title"><i></i><img width="106" height="150" src="Image"/></a>
</span>
</div>

Ive tried to find in the CSS how this is done but there are hundreds of references to tt-a and t-w.