CODEWITHSUNDEEP
htmlcss
Salini
Salini

Reputation: 347

In css how to display multiple divs?

In my project I want to display the text as like below:--

  Title
Name  Date
details

But I am getting :--

  Title
Namedetails
  Date

Here is my jsfiddle link :-jsfiddle

Where I have problem??

Upvotes: 0

Views: 54

Answers (3)

Shrinivas Pai
Shrinivas Pai

Reputation: 7701

Try this

.A div{
    padding:2px;
}
#title{
    font-size:100%;
}

#block1 {
  float: left;
  display: inline-block;

}

#block2 {

 display: inline-block;
clear:left;
}
.A {
    position: relative;
    margin: 40px 0;
    height: 100px;
    width: 200px;
    background: #eee;
}

.A:after {
    content: " ";
    display: block;
    background: #c00;
    height: 29px;
    width: 100%;
    position: absolute;
    bottom: -29px;
}

Demo Here

OR

I have simplified your css code.

Use this 

#title{
    font-size:100%;
}

#block1 , #block2{

  display: inline-block;

}


.A {
    position: relative;
    margin: 40px 0;
    height: 100px;
    width: 200px;
    background: #eee;
}

.A:after {
    content: " ";
    display: block;
    background: #c00;
    height: 29px;
    width: 100%;
    position: absolute;
    bottom: -29px;
}

Demo Here

Upvotes: 0

Antonio Hernández
Antonio Hernández

Reputation: 466

Ok, it's not necessary to add a clear: left when you already added a float: left to that same element. Instead, add a clear: both to the #title so it will stack at the bottom of all elements:

#title {
  font-size: 100%;
  clear: both;
}
#block1 {
  float: left;
  display: block;
}
#block2 {
  float: left;
  display: block;
}
.A {
  position: relative;
  margin: 40px 0;
  height: 100px;
  width: 200px;
  background: #eee;
}
.A:after {
  content: " ";
  display: block;
  background: #c00;
  height: 29px;
  width: 100%;
  position: absolute;
  bottom: -29px;
}

Upvotes: 0

Kristijan Iliev
Kristijan Iliev

Reputation: 4987

Here is a fiddle to see result.

Here are my changes:

.A > div{
    margin-right: 5px;
}

#title{
    font-size: 100%;
}
#details{
    font-size:100%;
    float: left;
    clear: both;
    display: inline-block;
}

#block1 {
  float: left;
  display: block;

}

#block2 {
    float: left;
    clear: right;
}

You have added #title twice, I replaces it with details here and added css rules above:

<div id= "details">
     <a>details</a>
</div>

And for an advice, use general css rules that you apply to multiple elements into single class and add that class to all your elements. Do not duplicate css rules to much.

Upvotes: 3

Related Questions