CODEWITHSUNDEEP
htmlcssposition
Anonymous
Anonymous

Reputation: 3

Same div in different positions? (CSS)

Is it possible to have a CSS div with different positions? For example, I have a div style I use often, and it seems excessive to create another id each time I want a different position. Is it possible to specify within the HTML the position of the div?

Thank you.

Upvotes: 0

Views: 3282

Answers (6)

PeeHaa
PeeHaa

Reputation: 72652

Try not to use inline styling if possible. You want to separate the html from the styling for readability and maintainablity

Add extra classes to the div instead.

HTML

<div class="styled">
</div>
<div class="styled otherclass">
</div>

CSS

.styled { background: red; border: 1px solid blue; }
.otherclass { background: green }

The second line overrules only the background. So the border is inherited from the styles class

Upvotes: 0

shamazing
shamazing

Reputation: 730

You can pass multiple classes to a DIV. Create one class that has all of your default properties. Then create several additional classes that position the DIVs where you want them.

.defaults
{
   properties...
}
.position1
{
   top: 0;
   left: 100px;
}
.position2
{
  top 100px;
  left: 0;
}

<div class="defaults position1"></div>
<div class="defaults position2"></div>

Upvotes: 4

Hamish
Hamish

Reputation: 23316

You cannot have more than one element with the same ID. Instead of defining the position by ID use a class for the common properties and the ID for only those properties specific to the particular elements:

.positionDiv {
    width: 400px;
    height: 200px;
 }
 #div1 {
    left: 20px;
 }
 #dev2 {
    left: 40px;
 }

 <div class='positionDiv' id='div1'>first div</div>
 <div class='positionDiv' id='div2'>second div</div>

Upvotes: 2

Arve Systad
Arve Systad

Reputation: 5479

If i understand your problem correctly, you can use a class instead of an ID:

<div class="something">...</div>

.something { whatever: whatever }

Upvotes: 1

Jakub Hampl
Jakub Hampl

Reputation: 40533

I'm not sure that I understand correctly your question, but you can assign multiple classes to elements and you can specify css inline. With a combination of these techniques you can vary the position very conveniently.

Upvotes: 0

Guffa
Guffa

Reputation: 700182

You can specify a style inline in the code:

<div style="left:10px;top:20px;">

I generally try to avoid this, though. It's easier to maintain the code if all the style is in one place.

Upvotes: -1

Related Questions