Question

I am trying to align 3 <div> elements in such way that two are next to each other, and the third is under them, stretching from one to another. Here is my Fiddle for you to see. Also here’s my css:

<style type="text/css">
body {
    background-image: url(https://www.dropbox.com/s/ri903jtb93a5168/background.jpg);
    background-attachment:fixed;
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    background-repeat:no-repeat;
    background-position:center;
    padding-right: 20%;
    padding-left: 20%;
    padding-top: 19%;
}
#left {
    float: left;
    width: 25%;
    text-align: center;
}
#right {
    float: right;
    width: 25%;
    text-align: center;
}

#bottom {
    position:relative
}

.lists {
    background: transparent;
    width: 268px;
    padding: 5px;
    font-size: 16px;
    border: none;
    height: 34px;
    -webkit-appearance: none;
}
</style>​

Any ideas? I’m new and trying to get a hold of css.

Thanks!

Answer 1

I kinda changed you code a bit,
I added clear:float, after the left and right div.

please take look at the Demo, do let me know if thats what you wanted