Question

<div class="widget-header">
    <span class="widget-title">
        Widget 1
    </span>
    <span class="widget-menu">
        <span class="btn change-col">
           To Main
        </span>
    </span>
</div>

Given the html above, I’d like to have span.widget-title and span.widget-menu inline with widget-title left-justified and widget-menu right justified. Currently, I have the following css:

.widget-header {
    position: relative;
    background-color: orange;
    border-radius: 5px;
}

.widget-title { 
    width: 30%;
    position: absolute;
    top: 0px;
    left: 0px;
}

.widget-menu {  
    width: 50%;
    /*position: absolute;
    top: 0px;
    right: 5px;*/
}

Notice the commented out part of .widget-menu. If I enable that, then the view “flips out” and the widget-header disappears completely. Why is that happening, and what’s the best way to position these tags so that the style is maintainable and capable of accommodating future changes?

Thanks in advance.

Answer 1

The ‘flip out’ happens because the parent div has no width or height because its span childrens have position absolute. To fix this you can give the div a fixed height

.widget-header{ 
    height:50px; 
    width:500px; 
}

Example: http://jsfiddle.net/dGrLh/2/

Or float the spans instead of position absolute like:

.widget-title { 
    width: 30%;
    float:left;
}

.widget-menu { 
    float:right;
}

Example: http://jsfiddle.net/dGrLh/1/