CODEWITHSUNDEEP
css
John
John

Reputation: 1629

Unwanted margin on float

How can i fix the unwanted margin of the "right" div.

The right floated div is margined like you can see here: JSFIDDLE: http://jsfiddle.net/s9Ssh/1/

The effect i wanted to achieve is to keep .mid layer always centered no matter the lenght of side div's text.

HTML:

<div class="main">

<div class="left">left</div>

<div class="mid">

    <a href="#">Vpis podjetja</a>
    &nbsp;|&nbsp;
    <a href="#">Iskanje</a>

</div>

<div class="right">right</div>

CSS:

 .main {

    text-align:center;
    width:100%;

}

.left {

    float:left;

}

.mid {


}

.right {

    float:right;

}

Upvotes: 0

Views: 264

Answers (3)

SurinderBhomra
SurinderBhomra

Reputation: 2199

Maybe this will help: http://jsfiddle.net/sbhomra/s9Ssh/4/

I have basically absolutely positioned the left and right div's and set the middle div to stay in the center by using margin:0 auto.

Edit

Fixed padding on left and right div's, so they are not too close the side of the page.

Upvotes: 2

riku
riku

Reputation: 763

http://jsfiddle.net/s9Ssh/3/

Move the right floated element before the middle element in the markup. It appears on a new row because the middle element isn't floated (and is a block level element).

Alternatively you can also float the middle element or set it to inline/inline-block.

EDIT: Although to clarify, if you float the mid element then you have to fiddle around with css a little since it will break your text-align. :P

Upvotes: 1

Fabrizio Calderan
Fabrizio Calderan

Reputation: 123377

try to add display: inline-block; to .mid element

example fiddle : http://jsfiddle.net/XSdJA/

Upvotes: 1

Related Questions