CODEWITHSUNDEEP
csshtml
Joshpho
Joshpho

Reputation: 85

Having a single div in a row with the others?

I've read a bunch of SO questions/answers on side-by-side (row) divs, but I don't think I'm grasping it as I can't find a solution for my specific setup:

http://www.trforums.com/h18-iwaku

Basically, I want the div on the very bottom to be to the right to the "Hey, What's up", "Navigation," and "Connect" boxes, instead of just under them. Is this possible to do?

The divs themselves are just classes with their corresponding html content. It's very basic but here's my code:

http://pastebin.com/AQrqqewA

My html is very rusty so other suggestions are more than welcome. Thanks for any help.

Upvotes: 0

Views: 54

Answers (3)

Praveen Gowda I V
Praveen Gowda I V

Reputation: 9637

Move the div with a class slideshow next to the div with a class ex and apply floats, as you can see in JS Bin

The final result can be seen here

Upvotes: 1

maqjav
maqjav

Reputation: 2434

Try surrounding each column in a DIV:

<!-- Left column -->
<div id="leftColumn">
    <div class="ex">
        <center><img style="display: inline;" src="http://i.imgur.com/wCP3WP3" alt="" /></center>
        <h1>Hey, what's up?</h1>
    </div>

    <div class="navbar">
        <b>NAVIGATION:</b> <a href="http://joshpho.weebly.com/zukan.html">Zukan</a> | <a href="http://joshpho.weebly.com/movies.html">Movies</a> | <a href="http://joshpho.weebly.com/retsuden.html">Retsuden</a>  | <a href="http://joshpho.weebly.com/misc.html">Photography</a> |
        </div>

    <div class="connect">
        <b>CONNECT:</b> <a href="http://joshpho.livejournal.com/profile">Livejournal</a> 
    </div>
</div>

<!-- Right column -->
<div id="rightColumn">
    <div class="slideshow">
        Bottom div that I want in a row with the top one...
     </div>
</div>

CSS:

#leftColumn {
    float: left;
    width: 410px; // Width of this column
}

#rightColumn {
    float: left;
    width: 500px; // Width od this column
}

Upvotes: 1

aBhijit
aBhijit

Reputation: 5381

Use float:left or display:inline on the divs that you want next to each other.

Upvotes: 0

Related Questions