SitePoint Sponsor

User Tag List

Results 1 to 12 of 12
  1. #1
    SitePoint Enthusiast
    Join Date
    Sep 2010
    Posts
    79
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    <div> positioning issue

    Hi

    I am new to using <div> for web page layout, and seem to be having a problem with positioning some <div>'s in line (horizontally) within an existing <div>. I tried display; inline; however that seems to remove the width control and margin, which i need to maintain. currently the relevant code is:

    .css
    HTML Code:
    .tablerow{
    	position:relative;
    	left:5px;
    	top:10px;
    	height: 30px;
    	width:750px;
    	border:1px solid black;
    	background-color:white;
    }
    
    .house_name{
    	postition:absolute;
    	margin:2px;
    	width:45px;
    	height:24px;
    	text-align:center;
    	font-family:Arial;
    	border:1px solid black;
    
    }
    
    .house_number{
    	postition:absolute;
    	left: 55px;
    	top: 0px;
    	margin:2px;
    	width:45px;
    	height:24px;
    	text-align:center;
    	border:1px solid black;
    
    }
    with HTML excerpt of

    HTML Code:
    		<div class="tablerow">
    			<div class="house_name">Name</div>
    			<div class="house_number">No.</div>
    		</div>
    If someone can point out to a newbie where he is going wrong i would appreciate it.

    Many thanks in advance

  2. #2
    SitePoint Wizard donboe's Avatar
    Join Date
    Jun 2010
    Location
    Netherlands
    Posts
    1,963
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You have to make the divs floating:
    Code CSS:
    .house_name,
    .house_number{
        width:45px;
        height:24px;
        margin:2px;
        float: left;
        display: inline; /* For older IE versions */
        text-align:center;
        font-family:Arial;
        border:1px solid black;
     
    }

    Since they both have the same properties you can combine them as above

  3. #3
    SitePoint Enthusiast
    Join Date
    Sep 2010
    Posts
    79
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you Donboe - Perfect result!

    (makes me wish i had asked 2 hours ago when i could still focus )

  4. #4
    SitePoint Wizard donboe's Avatar
    Join Date
    Jun 2010
    Location
    Netherlands
    Posts
    1,963
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You got it working, so now you can take some rest

  5. #5
    Non-Member
    Join Date
    Jun 2010
    Location
    4727′35″N 2618′0″E
    Posts
    1,789
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    A classic example on how not to do it!

    <div class="tablerow"> === BAD

    A <div>!= <td> !!!


    I suspect you're going about it the wrong way

  6. #6
    SitePoint Wizard donboe's Avatar
    Join Date
    Jun 2010
    Location
    Netherlands
    Posts
    1,963
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Is that because he has a class name tablerow noonnope?
    Code CSS:
    .tablerow{
       .......
    }

  7. #7
    SitePoint Zealot materialdesigner's Avatar
    Join Date
    Dec 2010
    Location
    Ithaca, NY
    Posts
    197
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'd like to provide an alternative solution:
    Code CSS:
    div.tablerow div {
      display: inline-block;
    }

    This will work fine for IE8 and every other modern browser.

    IE6 and 7 can only make naturally inline elements inline-block, but if you don't mind a hack, then you can also add
    Code CSS:
     div.tablerow div {
      display: inline-block;
      zoom:1;
      *display:inline;
    }

    There are other solutions, such as using display: table, and display: table-cell, but these are wonky in Safari, and not at all supported by IE6-7.

  8. #8
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by donboe View Post
    Is that because he has a class name tablerow noonnope?
    Code CSS:
    .tablerow{
       .......
    }
    Yeah, I would agree that it is not a good name for div class. Even though you could name it anything you like it is bad practice to confuse it with a completely different html element.

    For the same reason we discourage people from using .active as a class name for current page highlighting in menus. :active is actually a pseudo class and when you mix it in beside a class name (of the same) it becomes confusing.

    Dibley, you said you were new to div layout so we can cut some slack, just don't start naming your divs like they were tables. Give them names that are descriptive to what they are doing and the purpose they serve.

  9. #9
    Non-Member
    Join Date
    Jun 2010
    Location
    4727′35″N 2618′0″E
    Posts
    1,789
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Not only that. I may have to see more of its HTML, but I believe it's not the right markup for the job.

  10. #10
    SitePoint Wizard donboe's Avatar
    Join Date
    Jun 2010
    Location
    Netherlands
    Posts
    1,963
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by noonnope View Post
    Not only that. I may have to see more of its HTML, but I believe it's not the right markup for the job.
    Okay fair enough, I presume you're referring too, that this might be tabular data, since the other div's names are .house_name and .house_number. But like he mentioned, he's new to CSS, so why not just tell what you think he's doing wrong instead of just saying this is bad?

  11. #11
    SitePoint Zealot materialdesigner's Avatar
    Join Date
    Dec 2010
    Location
    Ithaca, NY
    Posts
    197
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well without the HTML it's an incomplete picture. There's no way to tell the relationship between the data.

  12. #12
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,233
    Mentioned
    47 Post(s)
    Tagged
    1 Thread(s)
    One problem people have coming from tables to non-tables is they often try to replicate the tables with divs.

    There are like 94 HTML tags out there, so if everything is a div it's automatically suspicious.

    The way out is to start with the text content first, then start marking it up with what the content is. This isn't easy for someone coming from tables either but I think it pushes them in a better direction.

    After the page is marked up to satisfaction, take a look at what you have now in a browser (or all browsers). Then you'll be using the minimal amount of CSS to push boxes into place with floats, margins, etc, rather than trying to labouriously and meticulously position everything (that's going to be a lot of code, as you can see with each element being absolutely positioned, and it's brittle).


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •