CODEWITHSUNDEEP
jqueryhtmlcss
Ottenira
Ottenira

Reputation: 97

Trying to compose divs in css

I'm trying to compose a 768x240 window. I have this (an example):

<div class="global-tab">
   <div class="image" src="link"></div>
   <div class="class1">{{details.name}}</div>
   <div class="class2">{{details.location}}</div>   
</div>

and in the CSS this:

.image {
    display: inline-block;
    width: 29.6875%;
    height: 60%;
    padding: 5.208% 3.6458% 3.6458% 2.08%;
}

.class1 {
    display: inline-block;
    font-family: "Arial";
    font-size: 20px;
}

.class2 {
    display: inline-block;
    font-family: "Arial";
    font-size: 12px;
}

The image goes left and the class1 and class2 at right (centering the text in the middle of the image with the line-height). I'm trying to put margins, paddings and aligning thoses texts but I can't compose divs with that order and I don't know why.

Any help? Thanks!!

Upvotes: 0

Views: 211

Answers (2)

edd2110
edd2110

Reputation: 324

Ok, first you have to set up properly the DOM. So, what I would do is to put it in two columns (If I understood, thats what you want). And it's simple, you only need to know the box model.

Second, you don't need a DIV for the image (Actually, that's not the way you insert an image, you must use the <img> tag, that where the attribute "src" goes)

And, try not to use widths and paddings with that kind of decimal numbers. It may cause problems later.

I made this for you. This is more simple, Hope this is what you need.

Here I'll leave you the html and css.

<div class="global-tab">
   <!-- DIV FOR FIRST COLUMN -->
   <div class="left-column">
       <img class="image" src="http://upload.wikimedia.org/wikipedia/en/thumb/d/d0/Chrome_Logo.svg/1024px-Chrome_Logo.svg.png">
   </div>
   <!-- DIV FOR SECOND COLUMN -->
   <div class="right-column">
       <div class="class1">{{details.name}}</div>
       <div class="class2">{{details.location}}</div>
   </div>
</div>

And here the css: 

.global-tab{
    display: inline-block;
    position:relative;
    background-color:#EEE;
    width:90%;
    height: auto;
    padding:10px;
    vertical-align:middle;
    text-align:center;
}

.left-column{
    width:48%;
    display:inline-block;
    vertical-align:middle;
    background-color:#333;
    text-align:center;
}

.left-column img{
    display: inline-block;
    width:100%;
    height:auto;
}

.right-column{
    width:48%;
    display:inline-block;
    vertical-align:middle;
    background-color:#333;
    color:#FFF;
    text-align:left;
}

Here, a JsFiddle working:

http://jsfiddle.net/p7akkxns/

Regards.

Upvotes: 1

SiVi
SiVi

Reputation: 177

Remove extra closing Curly braces } in CSS of .class1 and .class2 and try.

Upvotes: 0

Related Questions