9 Replies - 1142 Views - Last Post: 30 August 2013 - 10:28 PM

#1 ngroebner  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 44
  • Joined: 18-March 13

html css Don't want these divs to be able to overlap,

Posted 27 August 2013 - 03:02 PM

hello, I am having a problem creating these divs without overlapping when I add persons to the right side labels. I need these divs to be static and butt up top to bottom so that the list may grow and shrink without the lists overlapping into the next div. this is a web app, so the actual persons are generated by user selection from a database and the numbers may vary.


<div >
  <label style="display:inline-block; width:300px; margin-bottom: 30px;">Hiring:</label>
    
  <label style="position: absolute;  white-space:  nowrap;">minors 
      <br />  person 
      <br />person
      <br />person 
      <br /> person</label>
</div>


<div >
  <label style=" display:inline-block; width:300px; margin-bottom: 30px;">Firing:</label>
    
      <label style="position: absolute;  white-space: nowrap;">person
      <br />  person 
      <br />person 
      <br />person 
      <br /> person</label>
</div>



Is This A Good Question/Topic? 0
  • +

Replies To: html css Don't want these divs to be able to overlap,

#2 eddiehm  Icon User is offline

  • D.I.C Head

Reputation: 4
  • View blog
  • Posts: 76
  • Joined: 09-March 10

Re: html css Don't want these divs to be able to overlap,

Posted 27 August 2013 - 03:29 PM

Try floating your element rather then using absolute positioning I think that should fix your problem.
Was This Post Helpful? 0
  • +
  • -

#3 andrewsw  Icon User is online

  • Fire giant boob nipple gun!
  • member icon

Reputation: 3519
  • View blog
  • Posts: 12,019
  • Joined: 12-December 12

Re: html css Don't want these divs to be able to overlap,

Posted 27 August 2013 - 03:54 PM

  • Labels are intended for use inside forms.
  • Over-use of br-tags is a poor practice, use html-tags and css (display, margins, etc.) to separate content.
  • In particular, put each person's information in its own tag.
  • Absolute-positioning should rarely be used for laying out a page's content.
  • Absolutely-positioned elements are positioned relative to the page/viewport unless they are contained within another positioned element.

If you will be tabulating the data retrieved from a database then consider using a table.

This post has been edited by andrewsw: 27 August 2013 - 03:56 PM

Was This Post Helpful? 0
  • +
  • -

#4 ngroebner  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 44
  • Joined: 18-March 13

Re: html css Don't want these divs to be able to overlap,

Posted 27 August 2013 - 03:57 PM

View Posteddiehm, on 27 August 2013 - 03:29 PM, said:

Try floating your element rather then using absolute positioning I think that should fix your problem.



Unfortunately the float is used for left and right. the problem i am having is dynamically resizing the div height. but thank you for the response, i will continue to plug away.
Was This Post Helpful? 0
  • +
  • -

#5 ngroebner  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 44
  • Joined: 18-March 13

Re: html css Don't want these divs to be able to overlap,

Posted 27 August 2013 - 04:09 PM

@andrewsw I guess the idea is that we were trying to get around the use of tables...consider this, or help me consider this...take only one of the <div>'s, I through a border on just so I could get a better view of what is happening here...each label is inside the same div right? when the second label is added to its box dynamically grows. however it just expands outside of the div. why does the div not dynamically expand with the height of the label that is inside of it?

<div style=" border-style:solid; height:auto;">
  
  <label style="display:inline-block;          width:300px;">Hiring:</label>
    
      <label style="border-style:solid;position: absolute;  white-space: nowrap;">minors 
      <br />  minors 
      <br />minors 
      <br />minors 
      <br /> adults</label>
</div>



This post has been edited by andrewsw: 27 August 2013 - 04:14 PM
Reason for edit:: Removed quote

Was This Post Helpful? 0
  • +
  • -

#6 andrewsw  Icon User is online

  • Fire giant boob nipple gun!
  • member icon

Reputation: 3519
  • View blog
  • Posts: 12,019
  • Joined: 12-December 12

Re: html css Don't want these divs to be able to overlap,

Posted 27 August 2013 - 04:10 PM

The problem with the heights of the divs is caused by the use of absolute positioning, which takes an element out of the normal document flow.

If you will be tabulating data retrieved from a database then using a table is perfectly acceptable. People commonly mistake the advice to be "don't use tables" when it is, in fact, "don't use tables for layout".

This post has been edited by andrewsw: 27 August 2013 - 04:14 PM

Was This Post Helpful? 1
  • +
  • -

#7 ngroebner  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 44
  • Joined: 18-March 13

Re: html css Don't want these divs to be able to overlap,

Posted 27 August 2013 - 04:35 PM

View Postandrewsw, on 27 August 2013 - 04:10 PM, said:

The problem with the heights of the divs is caused by the use of absolute positioning, which takes an element out of the normal document flow.

If you will be tabulating data retrieved from a database then using a table is perfectly acceptable. People commonly mistake the advice to be "don't use tables" when it is, in fact, "don't use tables for layout".


ok so I took out the position:absolute and yes, now the div dynamically grows with the contents inside it. I understand that using the tables may be the best way to go, but lets forget that for a second, as it is my partner that has the idea and want to not use the tables. So is there anyway to make the list of persons not wrap underneath the label "hiring'?

this is what I get:

Hiring:   Person
person
person
person


this is what I want (if it can be done withough a table)

Hiring:   Person
          Person
          Person
          Person

This post has been edited by andrewsw: 27 August 2013 - 04:45 PM

Was This Post Helpful? 0
  • +
  • -

#8 ngroebner  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 44
  • Joined: 18-March 13

Re: html css Don't want these divs to be able to overlap,

Posted 27 August 2013 - 04:42 PM

I tell you what...I think well just use a table.

hash tag frowny face.
Was This Post Helpful? 0
  • +
  • -

#9 andrewsw  Icon User is online

  • Fire giant boob nipple gun!
  • member icon

Reputation: 3519
  • View blog
  • Posts: 12,019
  • Joined: 12-December 12

Re: html css Don't want these divs to be able to overlap,

Posted 27 August 2013 - 04:46 PM

View Postngroebner, on 27 August 2013 - 11:42 PM, said:

I tell you what...I think well just use a table.

hash tag frowny face.

Good choice :bigsmile:
Was This Post Helpful? 0
  • +
  • -

#10 BobRodes  Icon User is offline

  • Your Friendly Local Curmudgeon
  • member icon

Reputation: 574
  • View blog
  • Posts: 2,989
  • Joined: 19-May 09

Re: html css Don't want these divs to be able to overlap,

Posted 30 August 2013 - 10:28 PM

This is exactly the sort of thing to use a table for. Tables are for displaying tables of data. As Andrew mentioned, the reason that tables have a bad name is because people would insert little columns to space data and other silly things like that.

However, if you must:
<body>
   <div style="width:15%; float:left">
      <div>Hiring:</div>
   </div>
   <div style="width:85%;float:right">
      <div>Hello</div>
      <div>Hello</div>
      <div>Hello</div>
      <div>Hello</div>
      <div>Hello</div>
   </div>
</body>

You can use the padding style to space your divs the way you want them. Of course, if you don't like floating, you can do something like this:
<!DOCTYPE html>
<html>
<head>
   <style>
      body > div {display:table-cell;padding:10px}
   </style>
</head>
<body>
   <div style="width:15%;">
      <div>Hiring:</div>
   </div>
   <div style="width:85%;">
      <div>Hello</div>
      <div>Hello</div>
      <div>Hello</div>
      <div>Hello</div>
      <div>Hello</div>
   </div>
</body>
</html>


This post has been edited by BobRodes: 30 August 2013 - 10:49 PM

Was This Post Helpful? 0
  • +
  • -

Page 1 of 1