I'm not entirely clear on your question, but I'll do my best to provide an answer:
Column Layouts
If you're considering a column layout, floating elements might be the way to go. To ensure proper alignment, you may need to use a clearfix hack (link provided below). Clearfix allows floated child elements to maintain the height and block nature of their parent element. Remember that clearfix can only be added to block elements.
For example, let's work with a 2-column layout -- one #content column and a #sidebar column, although you can have more columns if needed.
To contain the #content and #sidebar elements within a parent div, you should add a class="clearfix".
For the content div, float it to the left. For the sidebar div, float it to the right.
Now, for the CSS:
#parentDiv { width: 750px; margin: 0 auto; }
#parentDiv #content { float: left; width: 500px; }
#parentDiv #sidebar { float: right; width: 200px; }
With this setup, you'll get a 750px container with a left-aligned content element and a right-aligned sidebar, leaving 50px space between them (750-(500+200) = 50).
Floating Modules
If you were actually aiming to create a module element such as a lightbox or popup window instead, that's also straightforward.
Begin by creating a div called #module and insert your content. Let's say you want it to be 500px wide and have a static height of 300px. Here's the corresponding CSS:
#module { width: 500px; height: 300px; border: 1px solid #000; position: absolute; top: 50%; left: 50%; margin: -150px 0 0 -250px; z-index: 100; }
Explanation:
The #module element is set to position: absolute, allowing it to be positioned anywhere in the window independently of its parent element. By placing it at 50% from the top and left of the window, we center it. Utilizing percentage values ensures responsiveness when the window size changes. The negative margins adjust the positioning so that the box is perfectly centered. The z-index is used to ensure the element remains on top even amidst other positioned elements like , , etc.
I hope this clarifies things for you.
Helpful Links