Simple Div Question

[booeyOH]

Hello,
When I put a <div> without a width property it defaults to 100%. Why is this, and is there a way to have it default to the width of the data in it?

Thanks,
Bryan

 

[feherke]

Hi

That is the default for block elements. If not want it like that maybe you should use other element.

Anyway, one solution so far :

div { display: inline; }

If not like it, tell us about your goal, not just two vague sentences.

Feherke.

http://rootshell.be/~feherke/

 

[booeyOH]

Ok, here is an exmaple of what I am doing:

<div style="border: 1px solid #000000;background:#c9c9c9;">
<div style="float:left;margin-left:1px;margin-right:1px;cursorointer;border-right: 1px #000000 solid;border-left: 1px; #000000 solid;" onMouseover="this.style.background='#EFEFEF';"
onMouseout="this.style.background='#c9c9c9';" onClick="alert('click')">Q1</div>
<div style="float:left;margin-left:1px;margin-right:1px;cursorointer;border-right: 1px #000000 solid;border-left: 1px; #000000 solid;" onMouseover="this.style.background='#EFEFEF';"
onMouseout="this.style.background='#c9c9c9';" onClick="alert('click')">Q2</div>
</div>

But I want it to look like this (without using the tables)

<div style="border: 1px solid #000000;background:#c9c9c9;">
<table border=0><tr><td>
<div style="float:left;margin-left:1px;margin-right:1px;cursorointer;border-right: 1px #000000 solid;border-left: 1px; #000000 solid;" onMouseover="this.style.background='#EFEFEF';"
onMouseout="this.style.background='#c9c9c9';" onClick="alert('click')">Q1</div>
</td><td>
<div style="float:left;margin-left:1px;margin-right:1px;cursorointer;border-right: 1px #000000 solid;border-left: 1px; #000000 solid;" onMouseover="this.style.background='#EFEFEF';"
onMouseout="this.style.background='#c9c9c9';" onClick="alert('click')">Q2</div>
</td></tr></table>
</div>

Any ideas?

 

[feherke]

Hi

Use [tt]float[/tt].

div.container {
  clear: left;
  background: silver;
  border: solid black 1px;
  padding: 2px;
}
div.element {
  float: left;
  margin: 0 3px;
  border-right: solid black 1px;
}
div.element:hover {
  background: whitesmoke;
}

<div class="container">
<div class="element">Q1</div>
<div class="element">Q2</div>
&nbsp;
</div>

Feherke.

http://rootshell.be/~feherke/

 

[booeyOH]

So I have to add the "&nbsp;" at the end? I put <div></div> in , so it wouldn't take up any horizontal space, is that ok?

Thanks,
Bryan

 

[feherke]

Hi

So I have to add the "&nbsp;" at the end?

Or you can use the clearfix trick. But if you give up with the [tt]div[/tt]s, is more simple :

div.container {
  background: silver;
  border: solid black 1px;
  padding: 2px;
}
span.element {
  margin: 0 2px;
  border-right: solid black 1px;
}
span.element:hover {
  background: whitesmoke;
}

<div class="container">
<span class="element">Q1</span>
<span class="element">Q2</span>
</div>

Feherke.

http://rootshell.be/~feherke/