CODEWITHSUNDEEP
csshtmlcss-float
HQ Aarhus
HQ Aarhus

Reputation: 27

Aligning DIV to the right

Im using a set of layers, with this CSS

.left1 {
    float: left;
    left: 5px;
    width: 72px;
    height: 100px;
}
.left2 {
    height: 100px;
    background-color: red;
    margin-left: 186px;
}
.eventCat {
    float: right;
    width: 5px;
    height: 100px;
}

to make inline divs. however, when i add a layer that i wish to be align to the right, it seems to fall below (the green one .eventCat). It should be at the right hand side of the red box! even with float:right; what am i missing?

I made a fiddle.. http://jsfiddle.net/7GBca/ to fiddle with :)

Upvotes: 1

Views: 125

Answers (5)

txpeaceofficer09
txpeaceofficer09

Reputation: 161

Put the eventCat (the element you want to float to the right) as the first element under wrapper.

Upvotes: 0

Rishi Kulshreshtha
Rishi Kulshreshtha

Reputation: 1878

Your issue is fixed, please check the code here:

<style type="text/css">
.eventCat {
float: right;
width: 5px;
height: 100px;
}
.eventIMG {
float: left;
left: 0;
width: 100px;
height: 100px;
}
.left1 {
float: left;
left: 5px;
width: 72px;
height: 100px;
}
.left2 {
height: 100px;
background-color: red;
margin-left: 186px;
}
.set:hover {
background-color: #FFDEAD;
cursor: pointer;
cursor: hand;
}
#event.title {
font-size: 21px;
font-weight: bold;
color: black;
text-decoration: none;
}
#event {
color: black;
}
</style>

and here is your HTML

<div class="wrapper">
  <div class="eventIMG" style="background:url('http://hqhq.dk/beta/wp-content/uploads/2013/07/png-5.jpg') no-repeat scroll center center / 100% auto transparent"></div>
  <div class="left1">
    <div style="text-transform: uppercase;">WED 18.09</div>
    <div style="text-transform: uppercase;">kl.22.00</div>
  </div>
  <div class="eventCat" style="background-color:green;"></div>
  <div class="left2" id="event">
    <div id="event" class="title"><a class="url" href="http://hqhq.dk/beta/event/fuzz-manta-dron/" title="FUZZ MANTA + DRÖN" rel="bookmark">FUZZ MANTA + DRÖN</a></div>
    <div></div>
    <div class="">
      <p>something here</p>
      <a href="http://hqhq.dk/beta/event/fuzz-manta-dron/" class="" rel="bookmark">Find out more »</a> </div>
  </div>
</div>
<div class="wrapper">
  <div class="eventIMG" style="background:url('http://hqhq.dk/beta/wp-content/uploads/2013/07/png-5.jpg') no-repeat scroll center center / 100% auto transparent"></div>
  <div class="left1">
    <div style="text-transform: uppercase;">WED 18.09</div>
    <div style="text-transform: uppercase;">kl.22.00</div>
  </div>
  <div class="eventCat" style="background-color:green;"></div>
  <div class="left2" id="event">
    <div id="event" class="title"><a class="url" href="http://hqhq.dk/beta/event/fuzz-manta-dron/" title="FUZZ MANTA + DRÖN" rel="bookmark">FUZZ MANTA + DRÖN</a></div>
    <div></div>
    <div class="">
      <p>something here</p>
      <a href="http://hqhq.dk/beta/event/fuzz-manta-dron/" class="" rel="bookmark">Find out more »</a> </div>
  </div>
</div>

What you have to do there is to replace you div.eventCat with div.left2 that's it :-)

Fiddle : http://jsfiddle.net/KRU9U/

Cheers

Upvotes: 0

samrap
samrap

Reputation: 5673

The easiest way to fix this is set a negative top margin to your green div:

.eventCat {
  margin: -100px 0 0 0;
  float: right;
  width: 5px;
  height: 100px;
}

Example Fiddle

Upvotes: 0

omma2289
omma2289

Reputation: 54619

It is not floating correctly because .float2 is not floted, my guess is you want it to expand to fill all available width and that's why you didn't set an explicit width. One solution to align .eventCat correctly would be to use position:absolute; and use right:0;

.wrapper {
    position: relative; 
}
.eventCat {
    position: absolute;
    right: 0;
    top: 0;
    width: 5px;
    height: 100%;
}
.left2 {
    padding-right: 5px; /*set this to the width of .eventCat so it does not overlap*/
}

Example fiddle

Upvotes: 1

Thanh Son Nguyen
Thanh Son Nguyen

Reputation: 184

you are missing "width: ...px" and "float: left" of 'left2' and "width: ...px" of 'wrapper'.

Upvotes: 0

Related Questions