How to create item detail view with css


Tags: html,css

Problem :

Htllo,

I have a specific div-tree:

<div class="item-detail">
    <div class="title">
        TITLE
    </div>
    <div class="info">
        <h1>LOREM IPSUM</h1>
        Lorem ipsum
    </div>
    <div class="links">
        <div class="drop-down">
            <div class="title">LOREM</div>
            <div class="item">lorem</div>
            <div class="item">lorem</div>
        </div>
        <div class="drop-down">
            <div class="title">LOREM</div>
            <div class="item">lorem</div>
            <div class="item">lorem</div>
        </div>
        <div class="drop-down">
            <div class="title">LOREM</div>
            <div class="item">lorem</div>
            <div class="item">lorem</div>
        </div>
    </div>
</div>

I am trying to make a css-style for that div, which will look like:

what i want

But i have no idea how should i start. Could you briefly tell me how to handle that or maybe give a short example of stuff like that?

Thanks



Solution :

You should rewrite your HTML a bit. Like this:

<div class="item-detail">
    <div class="title">
        TITLE
    </div>
    <div class="info">
       <h1>LOREM IPSUM</h1>
        <p>Lorem ipsum</p>
    </div>
    <div class="links">
        <select class="dropdown">
            <option value="title">LOREM</option>
            <option value="item">lorem</option>
            <option value="item">lorem</option>
         </select>
         <select class="dropdown">
            <option value="title">LOREM</option>
            <option value="item">lorem</option>
            <option value="item">lorem</option>
        </select>
        <select class="dropdown">
            <option value="title">LOREM</option>
            <option value="item">lorem</option>
            <option value="item">lorem</option>
        </select>
    </div>
</div>

In the CSS you should use floats to align the columns, something like this:

.text, .links {
    float: left;
}

.text {
    width: 70%;
}

.links {
    width: 30%;
}

.dropdown {
    width: 100%;
}

JSFIDDLE: http://jsfiddle.net/UU6Xp/


    CSS Howto..

    How to adjust responsive behaviour of menu bar's elements

    How to remove/ignore :hover css style on touch devices

    How to move the text a bit up and to the right?

    How to find a unique identifier using CSS for a class

    how to show the hidden div with same properties css with jquery

    How to make objects move with CSS?

    How to add new line in a Bootstrap button using CSS

    Having problems implementing a jQuery photo slideshow

    How to create a row of three expandable/collapsible divs which react on hover?

    how to make “before” li is fixed at the bottom of li?

    How to give the color to * without using span Tag

    How to animate text with css font-weight property in jQuery ? normal to bold

    Single page wordpress template. How to create new section in css

    How can I alter this CSS so that it only applies to a certain div?

    How can I make a div with “position:fixed” to stay out of the screen if the window overflows?

    CSS media type: How to load CSS for mobile?

    How do I scale the size of the elements in my HTML according to screen size?

    How can I correctly type css float?

    How would I make this into an dynamic :nth-child css selector [duplicate]

    CSS simple menu - how to align?

    How can I make sure that the footer will always be on the bottom of the last page when printing out?

    How do i create a responsive page with fixed positioned header and side nav using only html css?

    How to debug html code for which css is being applied? [duplicate]

    How to center CSS-shapes within a wrapper in a row

    How to prevent css hover effects executing before you reach the element with your mouse?

    How to render email template in a page?

    How to select first a element of li with CSS?

    How to formatting a simple
      in columns and bolding the first item on its own line

    How to Resize Unicode Characters via CSS

    HTML CSS How to swap css attributes