Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Westi on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Floating boxes within DIV boxes

Status
Not open for further replies.
djabell

djabell

Instructor
Apr 9, 2001
44
GB
I'm having a problem displaying floating boxes within a DIV box. I've got four DIV boxes: one to act as a container for the other three, one title box to hold a title graphic, one middle box for the main content of my page and a bottom box to hold a curved graphic. What I'm trying to do is add a series of thumbnails, each within a floating box so it's displayed in a similar way to a table. However, instead of displaying the floating boxes after the text, the floating boxes are displayed underneath the bottom box containing the curved graphic. I'm testing it using Firefox at the moment - any ideas most gratefully received!!

My CSS code is as follows:

body
{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
color:#999999;
text-align: justify;
background-color: #003333;
}

/* Container box */
div.pagebox
{
position: relative;
left: 10%;
top: 5%;
border: none;
background-color: #003333;
width: 846px;
}

/* Top title box */
div.title
{
position: relative;
width: 846px;
height: 210px;
background-image:url(../images/albumtitle.gif);
}

/* Main content box */
div.text
{
position: relative;
background-color: #ffffff;
border-left: 3px solid #006600;
border-right: 3px solid #006600;
padding: 10px 10px 10px 10px;
}

/* Bottom box holding curved graphic */
div.bottom
{
position: absolute;
width: 846px;
height: 42px;
background-image:url(../images/bottomBar.gif);
}

/* Floating box containing slide graphic */
div.contentimg
{
float: left;
width: 304px;
height: 225px;
background-image:url(../images/photoImage.gif);
margin-right: 15px;
}

div.picbox
{
position: relative;
margin-top: 3%;
border: none;
}

/* Floating box for thumbnails */
div.pic
{
float: left;
width: 136px;
height: 96px;
padding: 15px;
margin: 5px 3px;
background-color: white;
border: 1px solid black;
}
 
Sort by date Sort by votes
Is your div pic inside the 'main' div after the text? Is your div bottom last and outside your main div? It doesn't have to be, but if you're positioning it absolutely, perhaps you should give it a position, like bottom: 0 or something. You probably also need to play with margins so none of your divs impinge on that bottom div.

Greg
"Personally, I am always ready to learn, although I do not always like being taught." - Winston Churchill
 
Upvote 0 Downvote
Without the html arrangement of your elements described in your css it is very hard to say what is wrong with the page.
 
Upvote 0 Downvote
The relevant HTML coding is as follows:

<body>
<!-- Page Box -->
<div class="pagebox">
<div class="title"></div>
<div class="text"><div class="contentimg"></div><p class="title">Home</p><p>Blah, blah, blah</p>
<div class="picbox">
<div class="pic"><img src="photos/thumbs/DSCF0110.jpg"></div>
<div class="pic"><img src="photos/thumbs/DSCF0110.jpg"></div>
<div class="pic"><img src="photos/thumbs/DSCF0110.jpg"></div>
<div class="pic"><img src="photos/thumbs/DSCF0110.jpg"></div>
<div class="pic"><img src="photos/thumbs/DSCF0110.jpg"></div>
</div><!-- End of picbox -->
</div> <!-- End of textbox -->
<div class="bottom"></div>
</div> <!-- End of pagebox -->

</body>
 
Upvote 0 Downvote
A couple of observations:

1. Like Chris said, absolute positioning is taken out of the flow of document, so unless you know exactly where to position it in the page, it will be in a top left corner of its first positioned parent.

2. I cannot say from what you've shown us, but make sure you have a complete and valid doctype at the beginning of your document.

3. Floated elements are taken out of the flow of the document as well and do not expand the size of their parent container. To return to normal flow, one must include an element that clears the float. Add border or background to your .pagebox container and see how far it extends.

4. Read up on positioning and floating in my replies in this thread:
 
Upvote 0 Downvote
Cheers. Read your postings, tried a few hings, but still no luck. I've included the whole of my CSS and the whole of my HTML.


CSS
---

body
{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
color:#999999;
text-align: justify;
background-color: #003333;
}

div.dummyDiv
{
position: relative;
width: 100%;
border: 1px solid black;
}

div.albumtitle
{
position: relative;
/* width: 846px; */
background-color: #003300;
color: #ffffff;
font-size: 24px;
text-align: center;
vertical-align: top;
font-style:italic;
font-weight: bold;
border-left: 3px solid #006600;
border-right: 3px solid #006600;
}

div.pagebox
{
position: relative;
left: 10%;
top: 5%;
border: none;
background-color: #003333;
width: 846px;
bottom: 0;
}

div.title
{
position: relative;
width: 846px;
height: 210px;
background-image:url(../images/albumtitle.gif);
}

div.text
{
position: relative;
background-color: #ffffff;
border-left: 3px solid #006600;
border-right: 3px solid #006600;
padding: 10px 10px 10px 10px;
}

div.bottom
{
position: relative;
width: 846px;
height: 42px;
background-image:url(../images/bottomBar.gif);
}

div.contentimg
{
float: left;
width: 304px;
height: 225px;
background-image:url(../images/photoImage.gif);
margin-right: 15px;
}

div.picbox
{
position: relative;
margin-top: 3%;
border: none;
bottom: 0;
text-align: center;
}

div.pic
{
float: left;
width: 136px;
height: 96px;
padding: 15px;
margin: 5px 3px;
background-color: white;
border: 1px solid black;
}

p.title
{
background-color: #ffffff;
font-size: 28px;
font-style:italic;
color: #006600;
font-weight: bold;
}

div.text a:link
{
text-decoration: none;
font-size: 14px;
color: #0033FF;
}

div.text a:visited
{
text-decoration: none;
}

p.backlink
{
text-align: right;
}

div.text a:hover
{
text-decoration: underline;
color: #0066FF;
}

HTML
----

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"<html>
<head>
<title>Dave's Online Photos</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
@import url("css/layout.css");
-->
</style>
</head>

<body>
<!-- Page Box -->
<div class="pagebox">
<div class="title"></div>
<div class="text"><div class="contentimg"></div><p class="title">Home</p><p>Blah blah blah</p>
<div class="pic"><img src="photos/thumbs/DSCF0110.jpg"></div>
<div class="pic"><img src="photos/thumbs/DSCF0110.jpg"></div>
<div class="pic"><img src="photos/thumbs/DSCF0110.jpg"></div>
<div class="pic"><img src="photos/thumbs/DSCF0110.jpg"></div>
<div class="pic"><img src="photos/thumbs/DSCF0110.jpg"></div>
<div class="dummyDiv"></div>
</div> <!-- End of textbox -->
<div class="bottom"></div>
</div> <!-- End of pagebox -->

</body>
</html>
 
Upvote 0 Downvote
One more thing, the .pagebox class stops a bit before the floating elements stop. All of what you say makes complete sense, but I'm probably missing something somewhere down the line - any more ideas?
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

tyutghf
  • Locked
  • Question
Slanted divs
Replies
0
Views
658
tyutghf
tyutghf
jason.lex
  • Locked
  • Question
crop image to fit in a div box?
Replies
2
Views
206
jason.lex
jason.lex
tyutghf
  • Locked
  • Question
Hide div on input focus
Replies
2
Views
145
tyutghf
tyutghf
dvannoy
  • Locked
  • Question
Center a div within an asp.net content placeholder 1
Replies
1
Views
465
vacunita
vacunita
tulsantide
  • Locked
  • Question
Deselect values in list boxes
Replies
2
Views
170
c0deM0nK424
c0deM0nK424

Part and Inventory Search

Sponsor

Back
Top