Placing two DIVs side by side, float:left or right

Question

I've looked at and tried a few of the existing solutions on the site (for example CSS Problem to make 2 divs float side by side and CSS layout - Aligning two divs side by side) but none of them work for me.

I'm a bit of a newb to CSS but I'm trying to align the title and menu on my WordPress site http://photography.stuartbrown.name/ in a similar way to http://www.kantryla.net/. Whenever I float:right on the menu area however the menu disappears below the image and a float:left on the menu it pushes the image way out to the right.

I know that in order to achieve what I want I will need to reduce the size of the site title and reduce the width of the menu (perhaps by reducing the gaps between the items in the list?), but I'd really appreciate some advice on how to achieve the title and menu layout of kantryla.

You may notice that I edited the PHP of the theme to include a DIV

<div class="stuart_menu">

that surrounds both the title and menu thinking that this wold make the enclosed items easier to control. Nt sure if that's right or not but I can easily remove if necessary.

Thanks for any help!

Thanks for all your comments guys! Really appreciate it. I tried all the suggestions and noob's was the one that worked first time for me. — Stuart Brown, Sep 19 '13 at 09:43

score 2 · Accepted Answer · answered Sep 19 '13 at 08:42

2

Place these styles in your CSS

#logo {
    float: left;
    margin: 0 0 25px;
    position: relative;
    width: 20%;
}

#logo h1 {
    color: #555555;
    display: inline-block;
    font-family: "Terminal Dosis",Arial,Helvetica,Geneva,sans-serif;
    font-size: 25px;
    font-weight: 200;
    margin-bottom: 0.2em;
}

#menu {
   float: left;
   width: 80%;
}

.stuart_menu {
  overflow:auto;
}

I guess thats it.

answered Sep 19 '13 at 08:42

noob

641
1
6
21

Hi noob. Thanks again for your solution. It works well on desktop but breaks a little on smaller screen devices. Do you know a way to get the menu to drop down under the site title on mobile devices? – Stuart Brown Sep 20 '13 at 08:35
By smaller screen you mean mobile screens ? – noob Sep 21 '13 at 06:54
You can use CSS media queries for aligning the menus for smaller screens. If you want help please let me know. – noob Sep 21 '13 at 06:57
Hey noob, sorry for the late replay I've been away. If you could offer some pointers on the media queries for the menu solution you provided that would be great. I guess it would be best just to push the menu down underneath the site title? – Stuart Brown Oct 02 '13 at 14:34

score 0 · Answer 2 · answered Sep 19 '13 at 07:55

The menu is kinda messed up, I can't make any sense out of it with all the (unneeded) elements, classes.

But basicly you're on the right way, you'll need to redruce the size of both main elements (logo and menu) so it fits inside the parent div.

For instance, like this:

HTML

<div class="stuart_menu">
    <div class="logo">logo</div>
    <ul class="nav">
        <li><a href="#">Home</a></li>
        <li><a href="#">Blog</a></li>
        <li><a href="#">Photos</a></li>
        <li><a href="#">Delicious</a></li>
        <li><a href="#">Twitter</a></li>
        <li><a href="#">Google+</a></li>
        <li><a href="#">FOAF Description</a></li>
    </ul>
</div>

CSS:

.stuart_menu {
    width: 600px;
}
.logo {
    width: 150px;
    background: red;
    float: left;
}
.nav {
    list-style: none;
    margin: 0;
    padding: 10px 0;
    border-top: 1px solid gray;
    border-bottom: 1px solid gray;
    float: left;
}
.nav li {
    display: inline-block;

}

Also check this demo.

You can choose if you want to align the menu next to the logo (using float: left) or align it to the right side of the parent (changing the float to right).

score 0 · Answer 3 · answered Sep 19 '13 at 08:09

Any kind of solution you can try could lead to modify the look & feel of your site.

Maybe you can try to achieve this by reducing the width of the elements and make it float on left.

BTW, this would mess up the entire design of the site, because the "menu" section is inserted into the main container element. So I'd rather separate the two section.

what I'd do is:

#logo{ width:60%;float:left;}
nav {width:35%;float:left;}

to reduce the gap between the nav li elements you can reduce the padding and to make it more recognizable, add a border-right

#menu ul li{margin:22px 15px; border-right:1px solid #ccc;}

Hope this works

score 0 · Answer 4 · answered Sep 19 '13 at 08:09

0

Just changing the #logo to include float: left; should put the menu up with the logo. It will be to the right of it. Its just a matter of then down sizing both the logo and menu to fit within the container. Also the other answer should also work.

answered Sep 19 '13 at 08:09

Ruddy

9,795
5
45
66

Placing two DIVs side by side, float:left or right

4 Answers4