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 gkittelson on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

DIVs inside another DIV 1

Status
Not open for further replies.
snakehips2000

snakehips2000

Programmer
Nov 10, 2003
95
GB
Can someone please tell me why this doesn't work?

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

<style>
#maindiv {
position: relative;
border: thin ridge #666666;
text-align: center;
}

.divclubs {
float: left;
clear: right;
width:228px;
text-align:center;
}

.tblclubs {
margin: 0 auto;
margin-left:4px;
border:none;
width:228px
}
</style>

</head>
<body>
<div id="maindiv">
I want the three DIVs listed below to appear side by side in this containing DIV but they are below it! Why?
<div class="divclubs">
<table class="tblclubs">
<tr>
<td><a href="#" id="club4" onclick="">four</a></td>
</tr>
</table>
</div>

<div class="divclubs">
<table class="tblclubs">
<tr>
<td><a href="#" id="club5" onclick="">five</a></td>
</tr>
</table>
</div>

<div class="divclubs">
<table class="tblclubs">
<tr>
<td><a href="#" id="club6" onclick="">six</a></td>
</tr>
</table>
</div>

</div>

</body>
</html>
 
Sort by date Sort by votes
Floated elements do not affect the size of their parent.

So because your 3 .divclubs are floated they do not 'prop open' the #maindiv.

Google for "clearing floats" for more info.

There are a few ways around it.
1. Add a clearing (non-floated element) after your divs.

2. Add overflow:auto to the parent element

3. Float the parent element

Different situations dictate which method you choose.

Tek-Tips Forums is Member Supported. Click Here to donate

<honk>*:O)</honk>

Tyres: Mine's a pint of the black stuff.
Mike: You can't drink a pint of Bovril.
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

tyutghf
  • Locked
  • Question
Slanted divs
Replies
0
Views
665
tyutghf
tyutghf
jason.lex
  • Locked
  • Question
crop image to fit in a div box?
Replies
2
Views
211
jason.lex
jason.lex
tyutghf
  • Locked
  • Question
Hide div on input focus
Replies
2
Views
155
tyutghf
tyutghf
c0deM0nK424
  • Locked
  • Question
Parent Div, with a less wide Child Div which contains 2 child Div inside - Responsive Layout ? 2
Replies
3
Views
173
c0deM0nK424
c0deM0nK424
kurio71
  • Locked
  • Question
Centre a DIV Regardless of Screen Size 2
Replies
7
Views
242
ChrisHirst
ChrisHirst

Part and Inventory Search

Sponsor

Back
Top