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

CSS Positioning in web layout

Hey experts,

I can't seem to layout my page nicely in CSS using floats, or relative positioning, nothing seems to work. When I use floats, the background doesn't wrap to my elements because everything is taken out of the flow. When I use relative positioning nothing seems to wrap right. See the screenshots, description of screenshots, and CSS code below. Then read the end..

float-right screenshot: This is not a screenshot of the CSS represented below, but you get the idea. I'm floating elements here and the background doesn't wrap to the element anymore because the element is taken out of the flow so floating won't work.

screenshot.png: This is the screenshot of the CSS shown below with relative positioning, I can't get anything to wrap correctly... I don't know how to get my parent div's to form a nice web layout so everything is positioned nicely.

#MainBodyContactForm
{
    width: 500px;
    position: relative;
    display: block;
    clear: both;
    top: 60px;
    left: 10px;
    background: url("../../images/strBG.gif")  repeat;
    border: 2px solid #CCCCCC;
    border-radius: 5px;
}
#rightMenuBar 
{
    position: relative;
    display:block;
    clear: both;
    width: 370px;
    left: 570px;
    margin-right: 10px;
}

Open in new window


The width of the main div that these elements are in is 950px, so it is enough room

I just want a nice layout where everything positions nicely like it does on these pages:

http://bopskizzum.com/
https://twitter.com/bopskizzum
http://www.reverbnation.com/stoutstudios

HELP!, Thanks!

-Jeff
float-right.png
screenshot.png
0
jeffiepoo
Asked:
jeffiepoo
  • 3
  • 3
  • 3
  • +1
1 Solution
 
bigeven2002Commented:
Hello,

Sorry I seem to be a bit confused on what you are trying to accomplish.  Not sure what you mean by background wrapping around float.  Are you trying to get the form and the nav bar side by side in relative positioning?

Can you make a photoshop like screenshot of how you want it to look?
0
 
Chris StanyonCommented:
As you rightly say, if you float the contents of a container DIV, that container DIV no longer has any height. Add overflow:hidden to it, and it will then wrap your floated elements.

//HTML
<div id="myContainer">
     <div id="floatedContentLeft">This is floated left</div>
     <div id="floatedContentRight">This is floated right</div>
</div>

//CSS
#myContainer { background-color:blue; width: 500px; overflow:hidden; }
#floatedContentLeft { width: 250px; float:left; }
#floatedContentRight { width: 250px; float:right; }

Open in new window

0
 
jeffiepooAuthor Commented:
Wow. Hell ya! Thanks buddy works like a charm.

This doesn't seem to make sense to me why it works. You confirmed my statement, then gave me an answer.

Can you provide an explanation of why this works for learning's sake?

Thanks!

-Jeff
better.png
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
Chris StanyonCommented:
Here's the official explanation:

Floats, absolutely positioned elements, block containers (such as inline-blocks, table-cells, and table-captions) that are not block boxes, and block boxes with 'overflow' other than 'visible' (except when that value has been propagated to the viewport) establish new block formatting contexts for their contents.
Read it, digest it, forget about it and just accept that it works - I do :)
0
 
Julian HansenCommented:
No points please I like ChrisStanyon's answer better - but here is another way of acheiving the same thing
Clear your floats after the last float - this will force the parent container to the height of the tallest floated element
//HTML
<div id="myContainer">
     <div id="floatedContentLeft">This is floated left</div>
     <div id="floatedContentRight">This is floated right</div>
	 <div style="clear:both"></div>
</div>
//CSS
#myContainer { background-color:blue; width: 500px; }
#floatedContentLeft { width: 250px; float:left; }
#floatedContentRight { width: 250px; float:right; }

Open in new window

0
 
Chris StanyonCommented:
Hey Julian - I used to do it the same way, but it always felt a bit 'hacky' having to add non-content elements just for layout.
0
 
Julian HansenCommented:
Which is why I liked your solution - however there are times when it is necessary to clear the floating - not all layouts are as simple as this one so while I also don't like the unnecessary non-content element - and I am also not a big fan of the css content-after approach - there is the advantage that when looking at the document it is clear to see where the expected return to normal flow is - without having to refer back to the stylesheet.

So I think there is scope for the use of both - in this case however I would probably prefer the overflow:hidden - also I learned something new which is cool - never thought of doing it that way before.
0
 
jeffiepooAuthor Commented:
ChrisStanyon,

I have digested, and I have a question. Does this mean that all of the elements referenced above have "'overflow' other than 'visible'", and in my case the elements were 'overflow: hidden' because they were floated. This is why setting 'overflow: hidden' in the parent container wrapped all of the elements; because now they had the same overflow value?

In a sense, is this a correct application of your official explanation to this specific case?

JulianH,

Thanks that is also a suggestion I will try someday. Although putting clear: both in either of the individual floated elements before did not work, I will try putting a separate element at the bottom sometime that isn't floated with clear: both to see what happens. It probably works because that separate div element will have the same overflow value as the parent container.

Thanks guys!  Please confirm/add/deny anything I said.

-Jeff
0
 
Julian HansenCommented:
Although putting clear: both in either of the individual floated elements before did not work
Don't put them in the floated elements. Put it after them at the point you want flow to continue as normal so

<div class="floated"></div>
<div class="floated"></div>
<div class="floated"><div class="clear"></div></div> <--- NOT here
<div class="clear"></div> <---- put it here
0
 
jeffiepooAuthor Commented:
Right, I understood what you said. Thanks.
0
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: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

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.

  • 3
  • 3
  • 3
  • +1
Tackle projects and never again get stuck behind a technical roadblock.
Join Now