<div> positioning issue

HTML & CSS
1

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

.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

		<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

You have to make the divs floating:


.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

Thank you Donboe - Perfect result!

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

4

You got it working, so now you can take some rest :slight_smile:

5

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 :slight_smile:

6

Is that because he has a class name tablerow noonnope?


.tablerow{
   .......
}
7

I’d like to provide an alternative solution:


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


 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

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. :slight_smile:

9

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

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

Well without the HTML it’s an incomplete picture. There’s no way to tell the relationship between the data.

12

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).