Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
?
Solved

CSS Positioning in web layout

Posted on 2012-09-13
10
Medium Priority
?
402 Views
Last Modified: 2012-09-22
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
Comment
Question by:jeffiepoo
  • 3
  • 3
  • 3
  • +1
10 Comments
 
LVL 17

Expert Comment

by:bigeven2002
ID: 38397188
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
 
LVL 45

Accepted Solution

by:
Chris Stanyon earned 2000 total points
ID: 38397211
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
 
LVL 6

Author Comment

by:jeffiepoo
ID: 38397265
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
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 
LVL 45

Expert Comment

by:Chris Stanyon
ID: 38397282
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
 
LVL 61

Expert Comment

by:Julian Hansen
ID: 38397826
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
 
LVL 45

Expert Comment

by:Chris Stanyon
ID: 38398125
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
 
LVL 61

Expert Comment

by:Julian Hansen
ID: 38398166
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
 
LVL 6

Author Comment

by:jeffiepoo
ID: 38398830
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
 
LVL 61

Expert Comment

by:Julian Hansen
ID: 38398909
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
 
LVL 6

Author Comment

by:jeffiepoo
ID: 38399025
Right, I understood what you said. Thanks.
0

Featured Post

Receive 1:1 tech help

Solve your biggest tech problems alongside global tech experts with 1:1 help.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Dramatic changes are revolutionizing how we build and use technology. Every company is automating, digitizing, and modernizing operations. We need a better, more connected way to work together as teams so we can harness the insights from our system…
How do you create a user-centered user experience on your website? And what are some things you should consider in the process?
Any person in technology especially those working for big companies should at least know about the basics of web accessibility. Believe it or not there are even laws in place that require businesses to provide such means for the disabled and aging p…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…
Suggested Courses

580 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question