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!

div sizing problem

Status
Not open for further replies.
captlid

captlid

Technical User
Oct 27, 2004
82
US
I have 4 divs. One is on top 600px wide.
Below it are 3 in column format each 200px wide. All four divs have a 1px solid border.
The problem is that the 3 column divs stretch out horizontally at least two pixels. I added border-right:0px and border-left:0px to the middle column. That shrank it a bit. In IE its fine, in mozilla and opera the bottom divs stick out a bit.

<div class="roster">Rosters</div>

<div class="column3">
bleh bleh 1</div>
<div class="column3" style="border-right:0px; border-left:0px">
bleh bleh 2</div>
<div class="column3">
bleh bleh 3</div>

.column3 {
margin: 0px; padding: 0px;
width:200px;
float:left;
border: 1px solid #06c;
background: #6cf;
text-align: center;

}

.roster {
text-align:center;
width:600px;
background:#6cf;
border: 1px solid #06c;
border-bottom:0px;
}

 
Sort by date Sort by votes

Firefox / Moz show the DIVs as IE would if you had a valid DOCTYPE at the top of your page (i.e. standards compliant mode).

This means that the border takes up extra space outside the width of the box you've specified (so the top div takes up 602px, etc).

To get all to line up, you'd need to either increase the width of the top box, or decrease the width of 1 or more of the bottom boxes.

Hope this helps,
Dan



The answers you get are only as good as the information you give!

 
Upvote 0 Downvote
Apparently its an issue with the box model in ie5/5.5
doing the above helped thanks.
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

PeDa
  • Locked
  • Question
Horizontal rule and CSS problem 2
Replies
2
Views
694
PeDa
PeDa
tyutghf
  • Locked
  • Question
Slanted divs
Replies
0
Views
660
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
kurio71
  • Locked
  • Question
Centre a DIV Regardless of Screen Size 2
Replies
7
Views
230
ChrisHirst
ChrisHirst

Part and Inventory Search

Sponsor

Back
Top