New 2 CSS

#1 (**permalink**) Apr 23rd, 2005, 11:55

Hi, I am interested in learning more about css.

I havn't quite broken out of tables yet but am getting there. The thing I am a bit stuck on at the moment is croping boxes. :s

Basically - and I am going to describe this badly - I have 2 css boxes next to each other.

When I resize IE (or what ever) the right box moves to underneath the left box. How do I get it just to be cropped?

The next thing is if I resize the window dramatically the left box will resize too much. I want it to resize a bit but only so far - 50% of the box size...

For an example of what I want please view the yahoo groups and look at the main body box and the ad box next to it.

Thankyou

Rob · #2 (**permalink**) Apr 23rd, 2005, 14:30

Orko....

Welcome to the forums!

Do you have a URL so we can see what you are talking about?

Always provide a URL where possible so you can recieve a better quality of help.... right now, i dont suppose many people will understand what you mean.

#3 (**permalink**) Apr 23rd, 2005, 15:32

I don't have a url for it yet but here is the page:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">

</style>
<link href="../css/spcss.css" rel="stylesheet" type="text/css">
<link href="../css/spcss2.css" rel="stylesheet" type="text/css">
<link href="../css/spcss2.css" rel="stylesheet" type="text/css">
<link href="../css/spcss2.css" rel="stylesheet" type="text/css">
<link href="../css/spcss2.css" rel="stylesheet" type="text/css">
<link href="../css/spcss3.css" rel="stylesheet" type="text/css">
</head>

<body>
<table width="100" height="1201" border="1" align="left" cellpadding="0" cellspacing="0" id="mainTable">
<tr>
<td colspan="2" class="sitetitle" id="header">Website Title</td>
</tr>
<tr>
<td class="menubox" id="sidebar">
<p align="left" class="menubox">Home</p>
<p align="left" class="menubox">Localgroups</p>
<p align="left" class="menubox">Newsletter</p>
<p align="left" class="menubox">About Us</p>
<p align="left" class="menubox"><a href="../pages/contactus.htm">Contact
Us</a></p>
<p align="left" class="menubox">Links</p>
<FORM action=http://www.google.com/custom method=get>
<div align="center">
<input name="q" type="text" value="" size="14">
<INPUT type=submit value="Search" name=sa>
<INPUT type=hidden value=AH:center;AWFID:c32a032061318778; name=cof>
<INPUT type=hidden value=survivorspoetry.com name=domains>
<SPAN class=small>

<INPUT class=small type=radio CHECKED value= name=sitesearch>
Search this site

<INPUT class=small type=radio value="" name=sitesearch>
Search WWW</SPAN> </div>
</FORM></td>
<td id="maincontent">
<h1 class="pagetitle">Title</h1>
<p class="normaltext">[img]../images/cringer.jpg[/img]Qui
suas semper no, clita expetendis qui ex, minim platonem scribentur in
usu. Suas adolescens pro ad, ut amet democritum duo. Probo docendi noluisse
ne vel, mea no graeco fastidii. Nominati antiopam definiebas cu per, ad
facete comprehensam duo. Perpetua dissentiunt te mei, quodsi repudiandae
vel et, te qui maiorum torquatos comprehensam.

In qui solet tation, in labitur accusata referrentur duo. Ea molestie
erroribus per. Odio vide ei mei. Dolor legimus corpora ex has, cu oporteat
constituto sit. Molestie menandri voluptatum eu sea.

Ne pro diam ullum admodum, cetero diceret honestatis in eam, adhuc utroque
cum ei. Vero euismod delicatissimi in vix, mei ei aperiam accusata. No
vim etiam platonem maluisset, eos etiam utinam nostro no. Ut facer nostrud
quo. Eum ei laudem nostrum. Probo populo usu ea, quo malorum dissentiunt
consequuntur ea.

Ea duo lorem laudem denique, eam no phaedrum imperdiet. Ut mel dolor singulis
definiebas, duo inermis vivendo no. Wisi libris assentior ea est, pro
an facer epicuri delicatissimi, omnes eleifend adolescens et nec. An has
suscipit concludaturque. Ius at prima placerat.

In qui solet tation, in labitur accusata referrentur duo. Ea molestie
erroribus per. Odio vide ei mei. Dolor legimus corpora ex has, cu oporteat
constituto sit. Molestie menandri voluptatum eu sea.

Ne pro diam ullum admodum, cetero diceret honestatis in eam, adhuc utroque
cum ei. Vero euismod delicatissimi in vix, mei ei aperiam accusata. No
vim etiam platonem maluisset, eos etiam utinam nostro no. Ut facer nostrud
quo. Eum ei laudem nostrum. Probo populo usu ea, quo malorum dissentiunt
consequuntur ea.

Ea duo lorem laudem denique, eam no phaedrum imperdiet. Ut mel dolor singulis
definiebas, duo inermis vivendo no. Wisi libris assentior ea est, pro
an facer epicuri delicatissimi, omnes eleifend adolescens et nec. An has
suscipit concludaturque. Ius at prima placerat.

In qui solet tation, in labitur accusata referrentur duo. Ea molestie
erroribus per. Odio vide ei mei. Dolor legimus corpora ex has, cu oporteat
constituto sit. Molestie menandri voluptatum eu sea. </p>
<p class="box1">Ea duo lorem laudem denique, eam no phaedrum imperdiet.
Ut mel dolor singulis definiebas, duo inermis vivendo no. </p>
</td>
</tr>
<tr>
<td colspan="2" id="footer"></td>
</tr>
</table>
</body>
</html>

#4 (**permalink**) Apr 23rd, 2005, 15:33

And here is the css:

/* CSS Document */

body {
margin: 0 0 0 0;
padding: 0;
font-size: 14px;
background-color: #FFF;
}

#mainTable {
width: 100%;
height: auto;
margin: 0 auto;
border: 1px solid #ffffff;
/*/*/line-height: 1.5em; /* */
}
#mainTable td {
padding: 20px;/*Pads each table cell in modern browsers*/
}
#maincontent {
background-color: #FFFFCC;
width: 100%;
border: 0px solid #333;
font-size: 14px;
/*/*/font-size: 100%; /* */
}
#sidebar {
width: 120px;
font-size: 12px;
font-type: bold;
/*/*/font-size: 85%; /* */

}
#header {
height: 80px;
background-color: #6699FF;
color: #ffffff;
background-image: url(csst_bg.gif);
}
#footer {
background-color: #333333;
color: #CCCCCC;
background-image: url(csst_bg.gif);
}

td, p, ul {
font-family: Georgia, "Times New Roman", Times, serif;
}
h1:first-child {margin-top: 0;}/*starts first heading in a TD flush top*/
h2:first-child {margin-top: 0;}/*starts first heading in a TD flush top*/
h1 { font-size: 160%; }
h2 { font-size: 140%; }

#sidebar a {
/*/*/padding: 4px;
display: block;
margin: 2px;
border: 2px solid #6699FF;
text-decoration: none;
line-height: 1em;
width: 160px; /* */
}
#sidebar a:link, #sidebar a:visited {
color: #000000;
}
#sidebar a:hover, #sidebar a:active {
color: #FFFFFF;
background-color: #6699FF;
border: 2px solid #6699FF;
}
#current a {
color: #FFFFFF !important;
/*/*/background-color: #999999!important;
border: 2px dotted #999 !important; /* */
}
#sidebar ul {
/*/*/padding-left: 1em;
list-style-type: none;
margin-left: 1em; /* */
}

#sidebar li {
/*/*/margin: 0px 0px 6px 0px; /* */
}
#n4shell {
/* Happy hunting. This rule will allow you to create an outer border around the layout table in netscape 4. Wrap the entire table inside a div and assign to the div this id */
border: 1px solid #000;
/*/*/border: 0; /* */
}
.sitetitle {
font-family: Arial, Helvetica, sans-serif;
font-size: 36px;
font-weight: bolder;
color: #FFFFFF;
}
.normaltext {
background-color: #FFFFFF;
width: 75%;
height: auto;
border: 2px solid #6699FF;
font-size: 100%;
padding: 10px;
vertical-align: left;
float: left;

}
.pagetitle {
font-family: Arial, Helvetica, sans-serif;
font-size: medium;
font-weight: normal;
color: #000000;
background-color: #FFFFFF;
padding: 5px;
height: auto;
width: 50%;
border: 2px solid #6699FF;

}
.box1 {
font-family: Arial, Helvetica, sans-serif;
font-size: 70%;
font-weight: normal;
background-color: #FFFFFF;
float: left;
height: auto;
width: 200px;
margin: 10px 10px 10px 30px;
padding: 10px;
border-top: 2px solid #6699FF;
border-right: 2px solid #6699FF;
border-bottom: 2px solid #6699FF;
border-left: 2px solid #6699FF;
line-height: 20px;
position: static;
clip: rect(auto auto 100px auto);

}
.box1Copy {
font-family: Arial, Helvetica, sans-serif;
font-size: medium;
font-weight: normal;
background-color: #FFFFFF;
float: left;
height: auto;
margin: 5px;
padding: 10px;
border: 1px solid #FF9966;
width: 200px;
clear: left;

}
.logobox {
background-color: #6699FF;
height: auto;
width: 100%;
}
.picbox {
font-family: Arial, Helvetica, sans-serif;
font-size: small;
color: #000000;
text-decoration: line-through;
margin: 5px;
padding: 5px;
float: right;
height: auto;
width: 150px;
border: 2px solid #6699FF;
}

#5 (**permalink**) Apr 23rd, 2005, 15:40

sorry :s

Example page:

http://health.groups.yahoo.com/group...guid=126907973

^^^^^^^^^^^^^
The middle box and the right box