Creating CSS layout

Question

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 :)

You are doing it right. Use floated divs and set margin and padding. Look up 'clear' css attribute if you don't already know about it. — Mike
– Mike, Commented Dec 12, 2011 at 22:50
your question is a bit too broad to get any real answers. post (a basic version of) what you have in jsfiddle, and rewrite your question pointing specifically at the points you can't figure out. you'll get a far more interesting response. — ptriek
– ptriek, Commented Dec 12, 2011 at 22:53
Maybe try putting some code up will make it a lot easier to help you. Things like is your position relative and so on. — 1ftw1
– 1ftw1, Commented Dec 12, 2011 at 23:09
@ptriek thanks for jsfiddle, I never heard of it before, looks awesome — user1089548
– user1089548, Commented Dec 12, 2011 at 23:16
you're welcome, it's a fantastic tool - especially for sharing your coding troubles here.. — ptriek
– ptriek, Commented Dec 12, 2011 at 23:20

Pubby · Accepted Answer · 2011-12-12 23:58:58Z

2

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.

edited Dec 12, 2011 at 23:58

Pubby

53.3k13 gold badges147 silver badges186 bronze badges

answered Dec 12, 2011 at 23:02

Farzad A

5781 gold badge5 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

thirtydot Over a year ago

Flexbox is awesome, but the browser support isn't quite there yet. Most sites need to support at least IE9. I didn't downvote.

ptriek Over a year ago

flexible box model has limited support in common browsers - and you can perfectly accomplish his layout with just floats.

ptriek Over a year ago

(and i cancelled my downvote, after all it's not such a bad answer - i just didn't like the 'floats can be really messy' part :-)

ptriek Over a year ago

@thirtydot off topic, but still i want to know: how do you post links in comments?

Farzad A Over a year ago

Haha yeah that's just my personal opinion and should be removed from the answer :P

|

Mike · Accepted Answer · 2011-12-12 23:13:01Z

0

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

answered Dec 12, 2011 at 23:13

Mike

3581 gold badge3 silver badges12 bronze badges

Collectives™ on Stack Overflow

Creating CSS layout

2 Answers 2

8 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

8 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related