ADOBE DREAMWEAVER:

Dreamweaver Forum

Dreamweaver Tutorials

FAQ

Adobe Flash

Web Design

Floating Div inside Div

COW Forums : Adobe Dreamweaver

<< PREVIOUS • FAQ • VIEW ALL • PRINT • NEXT >>

•

Floating Div inside Div
by Chris Bridges on Dec 8, 2009 at 10:32:30 pm

Hi all,
I would like to have a div float inside a div and can't seem to get it to work. In my main content div (call it divA) I would like to have another div (call it divB) that is small box with some additional navigation links. I would like this divB to be in the upper right of my divA. I have tried floating divB but its not working...it floats right but not to to top right. New to CSS and could use some help. I don't have an example page but if someone could give me an idea where to start I would try it on a page and put it out there to look at.

Also, I am still trying to get my spry navigation bar to work..If someone could check out this post I would appreciate it: http://forums.creativecow.net/readpost/191/862630
Thanks in advance
Chris

Return to posts index

•

Re: Floating Div inside Div
by Fernando Mol on Dec 10, 2009 at 12:15:19 am

Doesn't sound like a common problem. You should be able to float elements with no problem.

At least post your code, both HTML and CSS.

*Always share a link to your site and rate the posts. This is a free service for you and for us.

Return to posts index

•

Re: Floating Div inside Div
by Chris Bridges on Dec 10, 2009 at 1:54:29 am

Fernando,
Thank you for answering so quickly. Here is a link to one example. http://www.auburnillinois.us/testsite/city_hall/group_cast.html
I want the "Forms for Download" box to be in the upper righ of the div and the main content text to wrap.

I have a couple of more div spacing questions after this one.
Thanks
Chris

Return to posts index

•

Re: Floating Div inside Div
by Chris Bridges on Dec 10, 2009 at 2:33:22 am

Fernando,
I ended up getting the box to float....brain lapse. I was was putting the floating div in the wrong spot.

Could you look at this page
http://www.auburnillinois.us/testsite/officials2.html
I can't figure out how to get space between before "committees", "appointments", "department heads" etc. I have ended up using a table inside the div to get the spacing (http://www.auburnillinois.us/testsite/officials.html). I would like to get away from tables.

Also, could you look at my post http://forums.creativecow.net/readpost/191/862620
I am having bad luck with the spry menu bar. I am thinking it may have something to do with the div holding the nav bar.
Thanks again
Chris

Return to posts index

•

Re: Floating Div inside Div
by Fernando Mol on Dec 10, 2009 at 5:35:19 am

Well, the way you are presenting the information in that pages calls for a table.

But you could use something simpler than a bunch of divs one after another. Why don't use just two divs floated left, one for each column?

If you do that you'll just need to apply a class of clear: both; for your headers.

With CSS you can define the top margin for your h4 elements.

I hope this helps

*Always share a link to your site and rate the posts. This is a free service for you and for us.

Return to posts index

•

Re: Floating Div inside Div
by Chris Bridges on Dec 10, 2009 at 12:56:02 pm

Fernando,
Thanks for your response..that sounds easier than what I was trying to do with css or I may just use the table as it is.

Were able to look at my other post regarding the spry nav bar? You and Richard were able to straighten my nav bar out when I used it on another site. I can't find another forum that can seem to help

Thanks
Chris

Return to posts index

•

Re: Floating Div inside Div
by Chris Bridges on Dec 11, 2009 at 8:14:41 pm

The reason I had multiple divs is so I could get things to line up across the div.

If I just float two divs how do I get things to line up in both divs (e.g, Name in div1 and title in div2)?

Return to posts index

•

Re: Floating Div inside Div
by Fernando Mol on Dec 12, 2009 at 12:19:36 am

Look at this layout:

<h1 class="clearfloat">first two columns</h1>

<div class="column"><p>one</p><p>two</p></div>

<div class="column"><p>first</p><p>second</p></div>



<h1 class="clearfloat">second two columns</h1>

<div class="column"><p>one</p><p>two</p></div>

<div class="column"><p>first</p><p>second</p></div>

Using this CSS should give you a two column layout.

<style type="text/css">

<!--

.clearfloat { 

	clear:both;

}

.column {

	float: left;

	width: 200px;

}

-->

</style>

*Always share a link to your site and rate the posts. This is a free service for you and for us.

Return to posts index

•

Re: Floating Div inside Div
by Chris Bridges on Dec 12, 2009 at 1:27:37 am

That is what I needed.
Thank you
Chris

Return to posts index

•

Re: Floating Div inside Div
by Chris Bridges on Dec 12, 2009 at 3:13:58 am

Fernando,
Let me ask you this. If I used the code above and say one instance I wanted the column to be 100px instead of the 200px in the css.
Would it be acceptable to (in the code) put this
<div class="column" style="width:100px;"></div>

or am I better off leaving the width out of the css and indicating the style width each time I use it (such as I put above)

Also, my <p> element has a line height and margin defined. I use this throughout the document. However, in this case I do not want the margin on the <p> element. What is the best way to go about this.

Hopefully this makes sense.
Thanks
Chris

Return to posts index

•

Re: Floating Div inside Div
by Fernando Mol on Dec 12, 2009 at 4:09:12 am

Just create a second class for the wider column.

Classes are a set of rules that you can use many times in your document. It's purpose is not having to define again and again the same parameter.

If you want to define the style of a pharagraph inside of a class, just do it this way:



.column p {

margin: 0;

}

In this example, all the paragraphs with the .column class will have a margin of zero. This will be more specific than the definition of the p tag only and it will be applied.

*Always share a link to your site and rate the posts. This is a free service for you and for us.

Return to posts index

<< PREVIOUS • VIEW ALL • PRINT • NEXT >>

FORUMS • TUTORIALS • MAGAZINE • STOCKYARD • VIDEOS • PODCASTS • EVENTS • SERVICES • NEWSLETTER • NEWS • BLOGS