473,327 Members | 1,896 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,327 software developers and data experts.

display problem with height on a div!

Hey Everyone

I wonder if someone can help me with this problem that i am having! Here is the code that i have written,

<div id="outline">
<div id="left"></div>
<div id="right"></div>
</div>

so there is an outer div that has a 1px solid border all of the way around, and then i have two div's inside that that i have floated left so they both sit side by side. Now i want it so that when there is more info added to the left or right div, the out div with the border will flow with it, but at the moment when i added more info to the left div, the outer div doesn't flow with it, just crops all the info, unless i give the outer div a height, which i don't want to do, because i have been told that if i don't add a height to it, i can then use the same style on each page!

If anyone has any solutions, please post them, because it is driving me mad at the moment!!! lol

Thanks for any help
Feb 27 '07 #1
8 1790
drhowarddrfine
7,435 Expert 4TB
This is normal and correct behavior. Divs are NOT to expand to contain floated elements because floats are removed from the normal flow. To accomplish what you want, try adding overflow:auto to the outer div.
Feb 27 '07 #2
This is normal and correct behavior. Divs are NOT to expand to contain floated elements because floats are removed from the normal flow. To accomplish what you want, try adding overflow:auto to the outer div.
Ok that works like a charm. Thank you for the help drhowarddrfine, at least i know that that was normal behavior as well now!!

Thanks again
Feb 27 '07 #3
Ok i have another question. I would like the div on the right to be a side bar, that is always flush with the bottom of the outer div. What would be the best way of doing this? At first i thought i could achieve the result i wanted, but putting the height at 100%, but it doesn't seem to do anything?? So what would be the best way to get the result i am looking for?

Any help would be great again.
Thanks
Feb 27 '07 #4
drhowarddrfine
7,435 Expert 4TB
What you would do is set the containing div as position:relative so the internal divs will use it as a reference and parent. Then set the right div as height:100%.
Feb 27 '07 #5
What you would do is set the containing div as position:relative so the internal divs will use it as a reference and parent. Then set the right div as height:100%.
Hey drhowarddrfine, that is how i had it set up, but the 100% height doesn't do anything, just stays the same height. Have you got any other idea's??

Thanks for the reply :)
Feb 27 '07 #6
drhowarddrfine
7,435 Expert 4TB
I assume you set the outer div to position:relative and there is content inside the divs? Can you post your code?
Feb 27 '07 #7
I assume you set the outer div to position:relative and there is content inside the divs? Can you post your code?
Yes you are right, i don't have any content inside the divs, apart from some margins!
Feb 27 '07 #8
drhowarddrfine
7,435 Expert 4TB
You need to either add content for them to expand or set a height/width to the containing div to see the effect.
Feb 27 '07 #9

Sign in to post your reply or Sign up for a free account.

Similar topics

13
by: Dan R Brown | last post by:
I have a large form that is generated dynamically in a jsp using xml / xslt. So, to break up this form into several "tabbed" sections, I break up the form using <div> tags. Each <div...
1
by: Jon W | last post by:
This is a small table with hover on the table cells. The first cell is setup to switch from div element to input element by use of display:block/none. In IE, onclick the input element is displayed...
2
by: ruby_bestcoder | last post by:
Hi Im having problem in firefox with display:none/block. I have essentially 3 li elements. In each element there are a few nested div:s. Clicking on one of the divs, makes another div to...
4
by: drew197 | last post by:
I am a newbie. I am editing someone elses code to make it compatible with Firefox and Safari. In IE, when you click on the proper link, a block of text is shown in a nice paragraph form. But, in...
5
by: CES | last post by:
All, I was hoping that someone might be able to help me with a few questions on Aligning Block Elements properly... Basically I have a row that has a fixed width of 900px. Within the row their is...
1
by: rbinington | last post by:
Hi, I am trying to write a DNN module that has the ability to insert articles into an article repository. I want the users to be able to move pages around and enter text into the FCKEditor. I...
3
by: Jannette | last post by:
I've got this to finally work in IE (its only taken me 2 days solid), but now mozilla isn't displaying the text on the same line as the image. I'm a newby at CSS, and I've think I've worked on trying...
1
by: Bob | last post by:
Hi, Hope you can help me with this one. I'm at my wits end. I'm trying to create an intelligent edit-box like the excellent "Customer" one at the URL: ...
15
by: cssExp | last post by:
hello, Rather than going on a wild explanation on what's the the problem, it'll be much quicker and easier if i let you look at it yourself, so I'll post my page source (actual contents taken out,...
2
by: wreed06 | last post by:
Hello, I have 2 problems. In my webpage, I have a dropdown list with a button that takes the user to a popup window specific to the option. I am using Firefox 2.0.0.13. I have successfully...
1
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: Vimpel783 | last post by:
Hello! Guys, I found this code on the Internet, but I need to modify it a little. It works well, the problem is this: Data is sent from only one cell, in this case B5, but it is necessary that data...
0
by: jfyes | last post by:
As a hardware engineer, after seeing that CEIWEI recently released a new tool for Modbus RTU Over TCP/UDP filtering and monitoring, I actively went to its official website to take a look. It turned...
0
by: ArrayDB | last post by:
The error message I've encountered is; ERROR:root:Error generating model response: exception: access violation writing 0x0000000000005140, which seems to be indicative of an access violation...
1
by: PapaRatzi | last post by:
Hello, I am teaching myself MS Access forms design and Visual Basic. I've created a table to capture a list of Top 30 singles and forms to capture new entries. The final step is a form (unbound)...
1
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
1
by: Shællîpôpï 09 | last post by:
If u are using a keypad phone, how do u turn on JavaScript, to access features like WhatsApp, Facebook, Instagram....
0
by: af34tf | last post by:
Hi Guys, I have a domain whose name is BytesLimited.com, and I want to sell it. Does anyone know about platforms that allow me to list my domain in auction for free. Thank you
0
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 3 Apr 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome former...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.