CODEWITHSUNDEEP
htmlcss
A.R.
A.R.

Reputation: 15685

css center align items with float

I have a problem where a floating element is interfering with the center alignment of some items in a list. Basically I am trying to have a set of elements that are centered horizontally, and then another element floating off to the right of them. I can do all of that, but the floating element is goofing up the math somehow. I have tried about a dozen different placements of the elements in the HTML to no avail.

HTML 

<body>
    <div class="floaty">Some Contents!</div>
    <div class="listStuff">
        <ul>
            <li>Item 1</li>
            <li>Item 2</li>
            <li>Item 3</li>
        </ul>
    </div>
</body>

CSS

.floaty {
    border:solid 1px green;
    float: right;
}
.listStuff ul {
    text-align:center;
    list-style-type:none;

    border: solid 1px blue;
    margin:0;
    padding:0;
}
.listStuff li {
    width:100px;
    height:100px;
display:inline-block;

    border: solid 1px red;
}

I am kind of new to all of this HTML/CSS business, and I am beginning to think that I am barking up the wrong tree. Can such a thing be done?

Fiddle Here: http://jsfiddle.net/YUn39/1/

Upvotes: 0

Views: 117

Answers (2)

Seanevd
Seanevd

Reputation: 238

Would changing your .floaty class to have absolute position be a problem or are you trying to achieve something else?

body {
    position: relative;
}
.floaty {
    border:solid 1px green;
    position: absolute;
    right: 0;
}

http://jsfiddle.net/YUn39/2/

Upvotes: 1

MilkyTech
MilkyTech

Reputation: 1927

use a wrapper as in this fiddle:

<div class="wrapper">
    <div class="listStuff">
        <ul>
            <li>Item 1</li>
            <li>Item 2</li>
            <li>Item 3</li>
        </ul>
    </div>
    <div class="floaty">Some Contents!</div>
</div>

.wrapper {
    position:relative;
    width:100%;
    height:auto;
}
.floaty {
    position:absolute;
    top: 0;
    right: 0;
    border:solid 1px green;
}
.listStuff ul {
    position:relative;
    text-align:center;
    list-style-type:none;
    border: solid 1px blue;
    margin:0;
    padding:0;
}
.listStuff li {
    width:100px;
    height:100px;
    display:inline-block;
    border: solid 1px red;
}

Upvotes: 2

Related Questions