CSS || Boxes next to eachother and below

[Evilsmoothie]

Here I am, back with another idiotic issue. Before complaining and teling me to google: I HAVE TRIED. For hours. No solution. I thought I had this figured out days ago but whatever.

I basicly want to have boxes next to eachother and underneath, however, I want the boxes that go underneath eachother to use the same css-code. Since I suck at explaining things, this is how it's supposed to look.

You must be registered for see links

. The heights will not be static, but the width will.

Could someone please give me some code, or direct me to some page that have this figured out in detail?? I've seriously tried looking, but I have no idea what to google for. Wiseass comments are not wanted.

I suck at explaining, so if this is unclear, let me know. Thanks

 

[Kaz]

Post the code you already have

 

[Evilsmoothie]

Post the code you already have

#boxes {
    top:10px;
    position:relative;
    height:auto;
}
#box_big {
    margin-bottom:20px;
    float:left;
    position:relative;
    width:585px;
    height:auto;
    background-color:#fff;
    border-top-right-radius: 0.2em;
    border-top-left-radius: 0.2em;
    border-bottom-right-radius: 0.1em;
    border-bottom-left-radius: 0.1em;
    box-shadow: 0px 0px 3px #c5c5c5;
}
#box_small {
    margin-bottom:20px;
    float:right;
    right:20px;
    position:relative;
    width:292px;
    height:auto;
    background-color:#fff;
    border-top-right-radius: 0.2em;
    border-top-left-radius: 0.2em;
    border-bottom-right-radius: 0.1em;
    border-bottom-left-radius: 0.1em;
    box-shadow: 0px 0px 3px #c5c5c5;
}

I guess you understand how the HTML was. And I know this is a mess, but what the hell.

 

[Magic]

Just off the top of my head I believe that to make things appear next to each other you need to do the following:

display: inline-block;

and than you will probably find that when you put content in them they will move weirdly and a fix to that is:

clear: both;

This was just off the top of my head without trying it but it's what I remember doing.

 

[Evilsmoothie]

Hmm yeah thanks @Magic, but I think I've fixed it.

#columns {
    top:10px;
    position:relative;
    height:auto;
}

#column1 {
    position:relative;
    height:auto;
    float:left;
    width:585px;
}

#column2 {
    position:relative;
    height:auto;
    float:right;
    width:292px;
    right:20px;
}

#column1 .box {
    margin-bottom:20px;
    background-color:#fff;
    border-top-right-radius: 0.2em;
    border-top-left-radius: 0.2em;
    border-bottom-right-radius: 0.1em;
    border-bottom-left-radius: 0.1em;
    box-shadow: 0px 0px 3px #c5c5c5;
}

#column2 .box {
    margin-bottom:20px;
    background-color:#fff;
    border-top-right-radius: 0.2em;
    border-top-left-radius: 0.2em;
    border-bottom-right-radius: 0.1em;
    border-bottom-left-radius: 0.1em;
    box-shadow: 0px 0px 3px #c5c5c5;
}

It seems to work, but someone please tell me if I'm doing something wrong with this. I would like to merge column1 box and column2 box into 1 but it wouldn't let me.

 

[Magic]

Hmm yeah thanks @Magic, but I think I've fixed it.

#columns {
    top:10px;
    position:relative;
    height:auto;
}

#column1 {
    position:relative;
    height:auto;
    float:left;
    width:585px;
}

#column2 {
    position:relative;
    height:auto;
    float:right;
    width:292px;
    right:20px;
}

#column1 .box {
    margin-bottom:20px;
    background-color:#fff;
    border-top-right-radius: 0.2em;
    border-top-left-radius: 0.2em;
    border-bottom-right-radius: 0.1em;
    border-bottom-left-radius: 0.1em;
    box-shadow: 0px 0px 3px #c5c5c5;
}

#column2 .box {
    margin-bottom:20px;
    background-color:#fff;
    border-top-right-radius: 0.2em;
    border-top-left-radius: 0.2em;
    border-bottom-right-radius: 0.1em;
    border-bottom-left-radius: 0.1em;
    box-shadow: 0px 0px 3px #c5c5c5;
}

It seems to work, but someone please tell me if I'm doing something wrong with this. I would like to merge column1 box and column2 box into 1 but it wouldn't let me.

Screenshot of what it looks like now