CODEWITHSUNDEEP
htmlcssalignment
Chris
Chris

Reputation: 59511

2 divs on same line?

I'm trying to get 2 divs on the same line, but alligned differently. Here is a pic of what I have right now and what I want:

[pic removed by poster]

and here is the code I've got:

<div class="newsdiv">
    <div class="picdiv" style="background-image: url('[...]');"></div>
    <div class="titlediv">
        <a href="#"><font size="4">', $row['title'], '</font></a>
    </div>
    <div class="textdiv">
        <font size="1">This is some dummy text</font>
    </div>
    <div class="linksdiv">
        <a href="#">[Read More...]</a>
        <div class="statsdiv">
            <a href="#">Views: 0 , Comments: 0</a>
        </div>
    </div>
</div>

and the stylesheet:

.newsdiv{
    overflow: hidden;
    height: 126px;
    width: 100%;
    padding: 5px;
    border: 2px solid black;
    display: inline-block;
    margin-bottom: 10px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.picdiv{
    width: 220px;
    height: 110px;
    border: 1px solid #444;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 382px 120px;
    float: left;
}
.titlediv{
    height: 20px;
    text-align: center;
}
.textdiv{
    overflow: hidden;
    margin-top: 8px;
    height: 70px;
    text-align: center;
}
.linksdiv{
    font-size: 8pt;
    text-align: center;
    height: 10px;
}
.statsdiv{
    font-size: 7pt;
    text-align: right;
    display: inline-block;
    height: 10px;
}

Any ideas of how to do this? Thanks!

Upvotes: 3

Views: 181

Answers (7)

Reign
Reign

Reputation: 289

Add a third div with a width of how ever wide you need it with no content between them - a place holder div ...remember to float right , text align and a margin as well.

Upvotes: 1

Fr0zenFyr
Fr0zenFyr

Reputation: 1929

You can use the position: absolute; on your .statsdiv and position:relative; on .linksdiv to achieve what you want. I guess using float will be too much for this.

Updated CSS(modified classes only):

.linksdiv{
    font-size: 8pt;
    text-align: center;
    height: 10px;
    position: relative;  /*added*/
}
.statsdiv{
    font-size: 7pt;
    /* text-align: right;  not required */
    display: inline-block;
    height: 10px;
    position: absolute; /*added*/
    right: -0.5%;       /*added*/
}

FIDDLE

Upvotes: 2

Asterodeia
Asterodeia

Reputation: 73

You could make your div go out of the flow making its position absolute :

.statsdiv{
    font-size: 7pt;
    text-align: right;
    display: inline-block;
    height: 10px;
    position: absolute;
    align: right;
    padding: 0 15px;
    width: 96%;
    left: 0;
}

Needs a little tuning to make it right in all definitions though...

Upvotes: 1

Dhaval Marthak
Dhaval Marthak

Reputation: 17366

You need float here

.statsdiv {
  font-size: 7pt;
  text-align: right;
  display: inline-block;
  height: 10px;
  float: right; /* Add this */
}

May be there will be more cleaner solution but you can try this for now

.linksdiv > a{
    margin-left:12%;
}

Updated Demo

Upvotes: 3

Aiswarjya
Aiswarjya

Reputation: 217

Replace your total css code, You need float on the class .statsdiv

Your total modified code is:

.newsdiv{
overflow: hidden;
height: 126px;
width: 100%;
padding: 5px;
border: 2px solid black;
display: inline-block;
margin-bottom: 10px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.picdiv{
width: 220px;
height: 110px;
border: 1px solid #444;
background-repeat: no-repeat;
background-position: center;
background-size: 382px 120px;
float: left;
}
.titlediv{
height: 20px;
text-align: center;
}
.textdiv{
overflow: hidden;
margin-top: 8px;
height: 70px;
text-align: center;
}
.linksdiv{
    font-size: 8pt;
    text-align: center;
    height: 10px;
}
.statsdiv {
  font-size: 7pt;
  text-align: right;
  display: inline-block;
  height: 10px;
  float: right; /* Add this */
}

Upvotes: 1

Mustafa sabir
Mustafa sabir

Reputation: 4360

Add this to your .statsdiv css

float:right;

here is the fiddle http://jsfiddle.net/cc68d/

Edit :- Although this works, as pointed out by you , it does not align Read More[..] in center. Actually the issue is with the design part. I will not go into details. You can correct this by adding style="padding-left:100px;" to your ReadMore[..] <a> tag attribute.

as shown here http://jsfiddle.net/cc68d/1/

Upvotes: 1

Manwal
Manwal

Reputation: 23816

Consider this working css. Here is Demo

.statsdiv {
font-size: 7pt;
text-align: right;
display: inline-block;
height: 10px;
float: right;/*added*/
}

Upvotes: 1

Related Questions