View Message HTML and CSS : <div> boxes : 87897


		Home \| Community \| Developer's Paradise User Groups \| Site Tools \| Site Information \| Search

Main Menu

Forums

SiteExperts.com Forums
All Discussions
SiteExperts Feedback
The Lounge
Dynamic HTML
Site Design/ Critiques
HTML and CSS
XML Technologies
The Wireless Internet
Internet Explorer
Microsoft .NET
The Server
Technical Support

Sponsored Links

User Groups : Forums : SiteExperts : HTML and CSS :

Previous Discussion Next Discussion
<div> boxes
Hi,

I want to show a box that contains small boxes of data
#main is a bigger box that contains smaller boxes called #deatails.

The bigger box encloses the smaller boxes in internet explorer.
In moxilla, the bigger box has a small height (say 50 pixels)
and does not enclose the smaller boxes. Obviously, i cannot specify
the height of the bigger box in pixels as it is variable
Could you please suggest a solution?

Thank you very much in advance.

Please take a look at the code
css:
#main
{
padding:15px;
width: 763px;
border: 3px solid silver;
background-color: rgb(250,254,254) ;
border: 1px solid lightsteelblue ;
}

#details
{
border: 1px solid rgb(250,254,254) ;
padding:7px;
width: 238px;
height: 120px;
float:right;
background-color: white ;
}

html:

loop start-

a few lines of data

loop end-

Started By emsiva on Dec 5, 2006 at 8:07:51 AM
10 Response(s) | Reply

View All Replies | Goto Page: 2 1
Jockrock on Dec 12, 2006 at 3:44:56 AM
emsiva - It's only the IDs that must be unique. The class can be used on multiples. The [#] signifies a unique style while the [.] signifies a global style

.details //note hash changed to dot
{
border: 1px solid rgb(250,254,254) ;
padding:15px;
width: 184px;
height: 110px;
float:left;
clear:top;
background-color: white ;
border: 1px solid lightsteelblue;
}
.details h3//note hash changed to dot
{
background-color: white ;
border: 1px dotted lightsteelblue;
text-align:center;
padding:3px;
font:12px arial, sans-serif;
font-weight:bold;
}

..then applied ..

<div id="detail001" class="details">Content for id "detail001" Goes Here</div>
<div id="detail002" class="details">Content for id "detail002" Goes Here</div>
<div id="detail003" class="details">Content for id "detail003" Goes Here</div>
<div id="detail004" class="details">Content for id "detail004" Goes Here</div>

Regarding the spacing. Sounds pretty obvious suggestion but have you tried :

H3 { font-size: 12pt; line-height: 11pt } or something along those lines? Is there somewhere we can view LIVE attempts?
View All Replies | Goto Page: 2 1

To respond to a discussion, you must first logon.

If you are not registered, please register yourself to become a member of the SiteExperts.community.