• Locked
3 replies [Last post]
Sun, 2008-03-16 19:33
smayman
Offline
Regular
Last seen: 14 years 43 weeks ago
Joined: 2008-01-12
Posts: 21
Points: 0

I am trying to put 3 elastic boxes in a row on my page at http://boalt.org/workersrights/index.shtml.

I tried lining up the tops of the boxes across the page, but they appear in a column instead of a row. Am I going about this correctly at all or am I way off? Thanks in advance...

HTML:


CSS:

#fbtop1 {
background-image: url(/workersrights/images/box1-1.gif);
background-repeat: no-repeat;
position:relative;
margin: 0px;
top: 0px;
height: 18px;
width: 262px;
}

#fbmain1 {
background-image: url(/workersrights/images/box1-2.gif);
background-repeat: repeat-y;
position:relative;
margin: 0px;
top: 0px;
min-height: 250px;
width: 232px;
padding-left: 15px;
padding-right: 15px;
padding-bottom:1px;
padding-top:1px;
text-align:left;
}

#fbbottom1 {
background-image: url(/workersrights/images/box1-3.gif);
background-repeat: no-repeat;
position:relative;
margin: 0px;
top: 0px;
height: 22px;
width: 262px;
}

#fbtop2 {
background-image: url(/workersrights/images/box2-1.gif);
background-repeat: no-repeat;
position:relative;
margin: 0px;
top: 0px;
height: 18px;
width: 267px;
}

#fbmain2 {
background-image: url(/workersrights/images/box2-2.gif);
background-repeat: repeat-y;
position:relative;
margin: 0px;
top: 0px;
min-height: 250px;
width: 237px;
padding-left: 15px;
padding-right: 15px;
padding-bottom:1px;
padding-top:1px;
text-align:left;
}

#fbbottom2 {
background-image: url(/workersrights/images/box2-3.gif);
background-repeat: no-repeat;
position:relative;
margin: 0px;
top: 0px;
height: 22px;
width: 267px;
}

#fbtop3 {
background-image: url(/workersrights/images/box3-1.gif);
background-repeat: no-repeat;
position:relative;
margin: 0px;
top: 0px;
height: 18px;
width: 262px;
}

#fbmain3 {
background-image: url(/workersrights/images/box3-2.gif);
background-repeat: repeat-y;
position:relative;
margin: 0px;
top: 0px;
min-height: 250px;
width: 232px;
padding-left: 15px;
padding-right: 15px;
padding-bottom:1px;
padding-top:1px;
text-align:left;
}

#fbbottom3 {
background-image: url(/workersrights/images/box3-3.gif);
background-repeat: no-repeat;
position:relative;
margin: 0px;
top: 0px;
height: 22px;
width: 262px;
}

Top
Tags:
Sun, 2008-03-16 19:36
#1
thepineapplehead
thepineapplehead's picture
Offline
Moderator
Last seen: 40 weeks 15 hours ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9683
Points: 819

you need to float them

you need to float them Wink

Verschwindende wrote:
  • CSS doesn't make pies

Top
Mon, 2008-03-17 19:00
#2
smayman
Offline
Regular
Last seen: 14 years 43 weeks ago
Joined: 2008-01-12
Posts: 21
Points: 0

Ah!

So I tried my hand at floating, and it worked out pretty well, though my 3rd box is wonky. Can you tell me what I did wrong (and if you see glaring stupidity in my code alert me to that too)?

http://boalt.org/workersrights/index.shtml

CSS:

#fbtop1 {
background-image: url(/workersrights/images/box1-1.gif);
background-repeat: no-repeat;
position:relative;
margin: 0px;
top: 0px;
height: 18px;
width: 262px;
float: left;
}

#fbmain1 {
background-image: url(/workersrights/images/box1-2.gif);
background-repeat: repeat-y;
position:relative;
margin: 0px;
top: 0px;
min-height: 250px;
width: 232px;
padding-left: 15px;
padding-right: 15px;
padding-bottom:1px;
padding-top:1px;
text-align:left;
float: left;
}

#fbbottom1 {
background-image: url(/workersrights/images/box1-3.gif);
background-repeat: no-repeat;
position:relative;
margin: 0px;
top: 0px;
height: 22px;
width: 262px;
float: left;
}

#fbtop2 {
background-image: url(/workersrights/images/box2-1.gif);
background-repeat: no-repeat;
position:relative;
margin: 0px;
top: 0px;
height: 18px;
width: 267px;
margin-left: 262px;
margin-right: 262px;
}

#fbmain2 {
background-image: url(/workersrights/images/box2-2.gif);
background-repeat: repeat-y;
position:relative;
margin: 0px;
top: 0px;
min-height: 250px;
width: 237px;
padding-left: 15px;
padding-right: 15px;
padding-bottom:1px;
padding-top:1px;
text-align:left;
margin-left: 262px;
margin-right: 262px;
}

#fbbottom2 {
background-image: url(/workersrights/images/box2-3.gif);
background-repeat: no-repeat;
position:relative;
margin: 0px;
top: 0px;
height: 22px;
width: 267px;
margin-left: 262px;
margin-right: 262px;
}

#fbtop3 {
background-image: url(/workersrights/images/box3-1.gif);
background-repeat: no-repeat;
position:relative;
margin: 0px;
top: 0px;
height: 18px;
width: 262px;
float: right;
}

#fbmain3 {
background-image: url(/workersrights/images/box3-2.gif);
background-repeat: repeat-y;
position:relative;
margin: 0px;
top: 0px;
min-height: 250px;
width: 232px;
padding-left: 15px;
padding-right: 15px;
padding-bottom:1px;
padding-top:1px;
text-align:left;
float: right;
}

#fbbottom3 {
background-image: url(/workersrights/images/box3-3.gif);
background-repeat: no-repeat;
position:relative;
margin: 0px;
top: 0px;
height: 22px;
width: 262px;
float: right;
}

HTML:













Top
Wed, 2008-03-19 19:33
#3
smayman
Offline
Regular
Last seen: 14 years 43 weeks ago
Joined: 2008-01-12
Posts: 21
Points: 0

Anyone?

Is there anyone out there who can help me with the problem above? I'm trying to float boxes so they line up, but it looks not so good... :?

Top
  • Locked