Issue centering a div between two floats

Question

I found a solution on this site to center a div between two floats . The solution works fine except that I have a double border now.

CSS

.trilink_container {
margin:5px;
overflow: hidden; /* contain floated elements */
}

.trilink_all {
border: 1px solid #CCCCCC;
color: #444444;
text-shadow: 0 1px 1px #F6F6F6;
background: #fdfdfd;
background: -o-linear-gradient(top,  #fdfdfd,  #eee);
background: -ms-linear-gradient(top,  #fdfdfd,  #eee);
background: -moz-linear-gradient(top,  #fdfdfd,  #eee);
background: -webkit-gradient(linear,  left top,  left bottom,  color-stop(0,  #fdfdfd),  color-stop(1,  #eee));
background: -webkit-linear-gradient(#fdfdfd,  #eee);
background: linear-gradient(top,  #fdfdfd,  #eee);
text-align:center;
 }

.trilink_item {
float: left; 
width: 32%;
margin-left:5px;
}

.trilink_right {
float: right; 
width: 32%;
margin-right:5px;
}

.trilink_center {
margin-left: auto;
margin-right: auto;
}

HTML

<div class="trilink_container">

<div class="trilink_item trilink_all">Left Test</div>
<div class="trilink_right trilink_all">Right Text</div>
<div class="trilink_center trilink_all">Centre Text</div>

</div>

I've also added the code to jfiddle.

BTW, I realise my coding is a bit messy and intend to tidy it up once I have a solution :)

Any ideas?

ScottS · Accepted Answer · 2013-04-11T19:56:55.750

4

Add overflow: hidden (or auto; anything but visible) to the .trilink_center and you will get what you want I believe (see this fiddle).

This establishes a new block formatting context which changes how the flow works. See this article for some discussion.

edited Apr 11 '13 at 19:56

answered Apr 11 '13 at 19:47

ScottS

71,703
13
126
146

Thanks, that does work and I will mark as correct answer as you were first :) – Michael Farah Apr 11 '13 at 19:55

score 1 · Answer 2 · answered Apr 11 '13 at 19:48

If you want to remove double border then just remove margin from left and right divs

.trilink_item {
    float: left; 
    width: 32%;
    //margin-left:5px; remove it
    }

.trilink_right {
    float: right; 
    width: 32%;
    //margin-right:5px; remove it
    }

JS Fiddle Example

score 0 · Answer 3 · answered Apr 11 '13 at 19:52

0

try this fiddle if you want to eliminate the double border near the edges. It removes border-left and border-right for left and right divs respectively

answered Apr 11 '13 at 19:52

Ejaz

8,719
3
34
49

score 0 · Answer 4 · answered Apr 11 '13 at 19:54

0

`.trilink_center {

 margin-left: auto;
 margin-right: auto;
 /* float left or right
 float: left;

}`

and that's all

answered Apr 11 '13 at 19:54

qualebs

1,291
2
17
34

Issue centering a div between two floats

4 Answers4