Jump to content

New To The <div> Layout Thing


elijahlucian
 Share

Recommended Posts

http://ultimatecarpet.ca/services.shtmlso on this page. im using a div container like this
<div id="container">then im floating one left: <div id="sidebar" style="float:left; blah blah"> </div>and one right<div id="text" style="float:right; blah balh"> </div></div>

no im not using inline style tags im just trying to show you what's going on...butwhen i add text to my "text" div it goes out of the bounds of the container... making my page look wacked. how can i make my container autosize to the content of the div's inside it?

Edited by elijahlucian
Link to comment
Share on other sites

Which div is giving you trouble?Why can't you show two lists side by side on the right hand column so the scrollbar goes away? That would place your Link "above the fold" and more clicks would result.Also, those "bodyheader" elements are headings. To do it correctly, they should be H2 or H3 tags instead of a classed div. Search engines would like that better, I think. Better page structure. More semantic.

Edited by jlhaslip
Link to comment
Share on other sites

You don't need to add float: right to the second column. That usually causes trouble.It is also important to define a width for your floated elements, and to add margins to the elements that aren't floated but are next to them.

<div style="float: left; width: 200px;">Left column</div><div style="margin-left: 200px;">Main column</div>

Link to comment
Share on other sites

You don't need to add float: right to the second column. That usually causes trouble.It is also important to define a width for your floated elements, and to add margins to the elements that aren't floated but are next to them.
<div style="float: left; width: 200px;">Left column</div><div style="margin-left: 200px;">Main column</div>

ingolme i took off the float on the right text part and added a margin, and its still overflowing... so what take a look at the pagehttp://ultimatecarpet.ca/services.shtmlill leave it like it is until i got a response. thats why i put the scrollbar in. i am still goign to put pictures on teh right floating, becasue its what the client wants.changed the tags, thanks for the tip. what do i use if i just want to bold one part of the line? the <hx> tags wont work
Link to comment
Share on other sites

I forgot to mention that if you don't want floated to overflow from their container, add overflow: auto to the container.If you want bold in only one part of the text, you can use a span:

<p>This is <span style="font-weight: bold;">bold</span> text.</p>

Link to comment
Share on other sites

I forgot to mention that if you don't want floated to overflow from their container, add overflow: auto to the container.If you want bold in only one part of the text, you can use a span:
<p>This is <span style="font-weight: bold;">bold</span> text.</p>

ok but look what overflow:auto doeshttp://ultimatecarpet.ca/services.shtmlit just adds a scrollbar. what i want to do is stretch the height of the container to fit the text.
Link to comment
Share on other sites

you can always add another div with "clear: both" (like a footer or something. that should stretch the container div down.

Link to comment
Share on other sites

ok but look what overflow:auto doeshttp://ultimatecarpet.ca/services.shtmlit just adds a scrollbar. what i want to do is stretch the height of the container to fit the text.
Which browser are you looking at your page with? Firefox 3, Internet Explorer 7 and Opera all display the page correctly.
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...