CODEWITHSUNDEEP
css
user1089548
user1089548

Reputation: 177

Creating CSS layout

At this time, I have huge problems with creating CSS layout. I'm learning how to convert PSD file to HTML/CSS at the moment.

I know how to make these small details like font-size, collors, padding, everything except layout.

For example I had problems with creating two column layout, ( I usually use floats ). For example, check out this layout:

Layout example

I float both columns, one to the left , another one to the right. Now this is usually where I have lots of problems, moving these 's inside floated columns, they often go down or can't fit inside.

All I use to position them are float, and then I set margins and padding to position them where I want. What way you would use to position these blue squares inside green rectangles in left column? Can you give me some examples and tips how to do it in the future?

I would be very grateful for any answers, thanks in advance :)

Upvotes: 0

Views: 270

Answers (2)

Farzad A
Farzad A

Reputation: 578

I recommend taking a look at the flexible box model.

Doing what you need with the flexible box model is not too complicated.

CSS:

.green {
    display: box;
    box-orient: horizontal;
    box-pack: start;
    box-align: start;
}

.stuffOnTheRight {
    display: box;
    box-orient: vertical;
    box-pack: start;
    box-align: start;
}

HTML:

<div class="green">
    <div id="square">
    </div>
    <div id="stuffOnTheRight">
        <div id="black"></div>
        <div id="yellow"></div>
    </div>
</div>

I realize this didn't answer how to do it with floats but you should consider looking at this.

Upvotes: 2

Mike
Mike

Reputation: 358

here's a quick rough-up: http://jsfiddle.net/wTxBS/7/

Upvotes: 0

Related Questions