CSS formatting/overflow issue

Question

HTML:

<div id="browse_list">
                <div class="browse_list_element">
                    <span class="list_element_logo">
                        Ghre
                    </span>
                    <span class="list_element_name">
                         Ghre
                    </span>
                    <span class="list_element_info">
                         Ghre
                    </span>
                    <span class="list_element_rating">
                         Ghre
                    </span>
                </div>
     <div class="browse_list_element">
                    <span class="list_element_logo">
                        Thre
                    </span>
                    <span class="list_element_name">
                         Thre
                    </span>
                    <span class="list_element_info">
                         Thre
                    </span>
                    <span class="list_element_rating">
                         Thre
                    </span>
                </div>
</div>

CSS:

#browse_list, .browse_list_element
{
    overflow: auto;
    border-style: solid;
    width: 400px;
}
.list_element_logo
{
    width: 100px;
    position: absolute;
    left: 0px;
}
.list_element_name
{
    width: 100px;
    position: absolute;
    left: 100px;
}
.list_element_info
{
    min-width: 150px;
    max-width: 100px;
    position: absolute;
    left: 200px;
}
.list_element_rating
{
    width: 50px;
    position: absolute;
    left: 350px;
}

http://jsfiddle.net/F6xJ2/

How do I fix this? I want the parent (.browse_list_element) to take the height of the children.

Why do you use absolute positions? Take a look on w3.org/TR/CSS21/visuren.html#choose-position — MatTheCat
– MatTheCat, Commented Nov 10, 2010 at 10:15

Kyle · Accepted Answer · 2010-11-10 10:23:09Z

1

Is this what you were after?

http://jsfiddle.net/Kyle_Sevenoaks/Yt6Yk/

HTML: (same)

<div id="browse_list">
                <div class="browse_list_element">
                    <span class="list_element_logo">
                        Ghre
                    </span>
                    <span class="list_element_name">
                         Ghre
                    </span>
                    <span class="list_element_info">
                         Ghre
                    </span>
                    <span class="list_element_rating">
                         Ghre
                    </span>
                </div>
     <div class="browse_list_element">
                    <span class="list_element_logo">
                        Thre
                    </span>
                    <span class="list_element_name">
                         Thre
                    </span>
                    <span class="list_element_info">
                         Thre
                    </span>
                    <span class="list_element_rating">
                         Thre
                    </span>
                </div>
</div>

CSS:

#browse_list, .browse_list_element
{
    overflow: auto;
    border-style: solid;
    width: 400px;
}
.browse_list_element span
{
    display: inline-block;
}

/*.list_element_logo /*commented out, for now
{
    width: 100px;
    position: absolute;
    left: 0px;
}
.list_element_name
{
    width: 100px;
    position: absolute;
    left: 100px;
}
.list_element_info
{
    min-width: 150px;
    max-width: 100px;
    position: absolute;
    left: 200px;
}
.list_element_rating
{
    width: 50px;
    position: absolute;
    left: 350px;
}*/

answered Nov 10, 2010 at 10:23

Kyle

67.5k28 gold badges148 silver badges153 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Sussagittikasusa Over a year ago

How do i get those list_element_ span's to occupy a certain width?

Kyle Over a year ago

Well now that they have display: inline-block; you can just add an explicit width: width: 150px; or whichever measurement you want to use :)

Sussagittikasusa Over a year ago

Aight, this has solved major css issues. Hey Kyle could you tell me which is the best way to position my html elements? Could you link me to a css code which you've done?

Kyle Over a year ago

Well it really depends on which elements you're trying to position, I guess you're asking this more in general than to this example here. I have a very simple site at the moment which uses a ton of postitioning: www.sevensense.co.uk

Sussagittikasusa Over a year ago

Hey, why is there space between the elements - jsfiddle.net/Yt6Yk/2 How can i remove it?

|

Collectives™ on Stack Overflow

CSS formatting/overflow issue

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related