CODEWITHSUNDEEP
htmlcss
Richie
Richie

Reputation: 73

How to put something directly to the right of another thing (HTML/CSS)?

Basically what I have is an HTML page with a "main content" block, if you will. All main content for that page goes in the div I have for it. What I want is to have a column with more stuff to the right of it, but whatever I try to do it always ends up going either below it or in some random place. Here is the code for my page, if anyone could help guide me through it that would be awesome.

HTML: http://pastebin.com/Hh2TNGdj CSS: http://pastebin.com/ZCEJkFmH

Thanks.

Upvotes: 2

Views: 5315

Answers (4)

FireCrakcer37
FireCrakcer37

Reputation: 1026

I would switch to using HTML5 tags, personally. If I were to do something like this, I would go with code along this line (untested):

    <div id="wrapper"> #wrap both sections in a container
        <section id="left">Left Section</section>
        <section id="right">Right Section</section>
    </div>

For the CSS, you can do something like this:

    #wrapper {
        width: 1000px;
        height: auto;
    }
    #left {
         width: 500px;
         height: auto;
         float: left;
     }
    #right {
          width: 500px;
          height: auto;
          float: left;
     }

Some important things to remember. If you add padding, subtract that from the width (if padding is on both left and right, subtract padding x2). On your footer, put clear: both.

Hope this helps you out.

Upvotes: 1

vguzmanp
vguzmanp

Reputation: 825

I think this should work:

<div style="padding:20px;">
        <div id="pagecontent">
                <span class="main-content-font">
                            The title of this page goes in the gray box above. This is the homepage, you can put <u>anything</u> here  (the main content of your website
                            which has some neat features and explains what your site is about should go here)!<br />
                            <br>
                            Content, content, and more content!<br />
                            <br>
                            Try to make it fill up as much space as possible, making the page longer. Don't fill it with useless junk, just anything
                            you can think of that will benefit the page.
               </span> 
               <span class="whatever">
                    some things
               </span>
        </div>
</div>

I haven't tried it, but making main-content-font a span will not add a newline, so the whatever span will be placed to its right.

Upvotes: 0

FelipeAls
FelipeAls

Reputation: 22171

Here's a fiddle: http://jsfiddle.net/n6D7U/

  • new div #aside,
  • both columns are floating with fixed width (700+20+240 pixels here),
  • last CSS rule is there because parent has only floating children and thus no more content in the flow to push down the background...

Upvotes: 0

LeonardChallis
LeonardChallis

Reputation: 7783

You were probably close... putting in your new div straight after #pagecontent, and floating it right, then floating the #pagecontent div left, will allow them to sit side by side.

Note that the next content (footer, for instance) will need to be cleared properly so it won't overlap your floated divs.

Upvotes: 1

Related Questions