• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 212
  • Last Modified:

Moving one div to the right of another


I have a development page with a number of divs.  

Please go here to get to that page....Click for link to Development page

I need the div with the id of centertop to be moved to the right of div#content, and aligned with the top of div#content.  It needs to fit inside of the light purplish background (which I temporarily colored to help this question.)

I think once that is handled, the page will work correctly for me.  I may need one more fine tuning, but let's start with this request first.

Thanks again!

Rowby Goren
Rowby Goren
2 Solutions
You can use float:left and float:right to align the divs the way you want. You will however need to play with it a bit to fix it exactly as needed but generally float will arrange the divs next to each other with the tops on the same level
Rowby GorenAuthor Commented:
Hi TheAvenger,

Thanks.  I will try that now  Stay tuned....

Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
Hi Rowby,
It would help if you can create a reduced test case http://css-tricks.com/reduced-test-cases/ and let's just work with very basic layout.  There is a lot on the page to work with otherwise.  

In simple terms you are going to have something like below where you have 2 divs inside a container.  The two width's = the width of the container.  Float them left.  From there add fancy css for margin and/or padding.

<div id="container">
   <div id="content">content</div>
    <div id="centertop">stuff</div>

Open in new window


Open in new window

Easily Design & Build Your Next Website

Squarespace’s all-in-one platform gives you everything you need to express yourself creatively online, whether it is with a domain, website, or online store. Get started with your free trial today, and when ready, take 10% off your first purchase with offer code 'EXPERTS'.

Rowby GorenAuthor Commented:
Hi TheAdvenger padas

Thanks for your suggestions etc!

It looks like in general the float right is working.

If you look at the page, the fonts etc and padding etc look at bit disheveled.  But I think I can fix that.  

The link to http://css-tricks.com/reduced-test-cases/  is also helpful -- thanks for that too.

I will resume working on the padding, style a little later today.

But I think the basic question has been answered and I will split points in some appropriate way...

Stay tuned.  I will come back here in an hour or so, I think (it's very sunny outdoors here in California and I am tempted to take a short break :)

I've requested that this question be closed as follows:

Accepted answer: 250 points for TheAvenger's comment #a39456645
Assisted answer: 250 points for padas's comment #a39456657

for the following reason:

This question has been classified as abandoned and is closed as part of the Cleanup Program. See the recommendation for more details.
Rowby GorenAuthor Commented:

Thanks for your solutions. Sorry for the delay in awarding the points.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now