[RESOLVED]CSS with little knowledge

So I got a problem involving CSS, I don’t really understand it. It looks simple, it looks understandable but when you try to put 2 things side by side it starts looking like tick tac toe…….

What I am trying to do is take 3 UL lists and put them side by side by side, it just doesn’t seem to work. They end up looking like this

OXX

XOX

XXO

any suggestions.

You just need to give each UL an ID and apply a float left style to them. e.g.

HTML

<ul id="One">
            <li>O</li>
            <li>X</li>
            <li>X</li>
        </ul>
        <ul id="Two">
            <li>X</li>
            <li>O</li>
            <li>X</li>
        </ul>
        <ul id="Three">
            <li>X</li>
            <li>X</li>
            <li>O</li>
        </ul>

CSS

    <style type="text/css">
        #One
        {
            float:left;
        }
        #Two
        {
            float:left;
        }
        #Three
        {
            float:left;
        }
    </style>

I will try this but I did try something similar to this yesterday with 3 divs or 4

You don’t need the IDs to apply style like that.

Just wrap the ULs in a wrapper and access them, for example:

.ulWrapper ul{
float:left;
}

Example here: http://jsfiddle.net/r5wnezcy/

I see, I got it working currently by the method above however I think I am starting to understand this abit. Can this be used for panels and wrapping buttons and textboxes up…. as I someone got this really cool shape but its squishing my buttons and textboxes…….

If stuff is getting squished when you apply float:left; to them, just give them a width e.g. width:200px;

Depending on the element, you may also need to add: display:block; to get the width to take effect.

I used margin-left and margin-right to take care of the squishedness. Works like a charm now thanks all.

Leave a Reply