What's new

Welcome to Japan Reference (JREF) - the community for all Things Japanese.

Join Today! It is fast, simple, and FREE!

some css help, please

deadhippo

先輩
Joined
9 Apr 2005
Messages
360
Reaction score
30
css help:

hi
im trying to design may pages without tables, for the most part anyway
and i wanted to make a 3 column table with css

two columns are no problem but for some reason my 3 column layouts dont render next to each other but below each other

this is the css that im using but it doesnt work

#1column {
float: left;
width: 150px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 20px;
padding: 0px;
height: auto;
}
#2column {
float: left;
width: 150px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 20px;
padding: 0px;
height: auto;
}
#3column {
float: left;
width: 300px;
margin-top: 0px;
margin-right: 20px;
margin-bottom: 0px;
clear: right;
padding: 0px;
height: auto;
margin-left: 20px;
}

and this is for the two column table and works
#leftColumn {
float: left;
width: 300px;
margin-top: 10px;
margin-right: 0px;
margin-bottom: 20px;
margin-left: 20px;
}
#rightColumn {
clear: right;
float: right;
width: 300px;
margin-top: 10px;
margin-right: 20px;
margin-bottom: 20px;
margin-left: 0px;
}
 

deadhippo

先輩
Joined
9 Apr 2005
Messages
360
Reaction score
30
-Rudel- said:
Have you tried the No-Wraps value for each element?
no i havent
ill look into that, thanks

well, i had a look and i have no idea of how to do that 😌
 
Last edited:

Spike308

Sempai
Joined
12 Oct 2003
Messages
144
Reaction score
0
you could always have it auto-margin layout.
so, the basic aspects would be sorta like this:

.side1 {
margin-right: 90%;
width:10%;
left:0;
top:0;
}

.side2 {
margin-left:10%;
margin-right:10%;
width:80%
position: absolute;
left:10%;
top:0%;
}
.side3 {
margin-left:90%
width:10% ;
position: absolute;
right:0;
top:0;
}

I admit, it's rusty, but I've used that general design before without problems. And I wouldn't exactly do a copy and paste operation. You seem to know what you're doing, so go from there.
 
Top Bottom