How to make divs float on both ends of another div?


Tags: html,css

Problem :

I have tried this so far,

http://jsfiddle.net/BXSJe/4/

I am trying to place 2 divs in the left and right ends of another div, I tried using float:left and float:right but they are showing up in new Lines

I want something like this,

[[leftcap]................. TITLE ............... [rightcap]]

I'm really sorry I can't represent better than this.

HTML

<div id="shell">
    <div id="title">
        <div id='leftcap'>o</div>
        TITLE HERE
        <div id='rightcap'>x</div>
    </div>
    <div id="content">Content</div>
</div>

CSS

 #shell {
 width:500px;
 height:300px;
 background:lightGrey; 
}

#title {
 background:green;
 padding:5px;
 border-radius:25%;   
 text-align:center;
}
#content
{
    text-align:center;
    vertical-align:center;
}
#leftcap
{
    width:10%;
}
#rightcap
{
    width:10%;
}
#leftcap,#rightcap
{
    height:100%;
    width:10%;
    background:red;
}

UPDATE: Using float property solved the problem, I have another question, how to vertically center align the text in a container div ?



Solution :

What you need is CSS's float property which kind of forces an element to be aligned either left or right.

Updated fiddle: http://jsfiddle.net/BXSJe/820/

Hope this helped. :)


    CSS Howto..

    show a div over another when resizing on hover

    How to prevent Twitter Bootstrap changing margins as width of page is extended

    How to override css for img tag

    How to create a dropdown menu like google's 'More' button?

    how to make css tooltip not push elements outline in FF

    How to use the CSS pseudo element :before in multiple classes of same element

    How do customize option box that pops up when selectbox is clicked (iOS, HTML, CSS)

    HTML CSS - How to put button at the center of my page

    How to force an update of a css selector inside context?

    How to make 2 backgrounds “stick” to the sides of a centered div

    In how many ways and places we can place comment in CSS?

    How can Shake FilePatterns be used to minify JS and CSS files?

    How to apply CSS class on current element using jQuery

    How to add new fonts in CSS for local testing

    How to extract attribute values using css selectors?

    How to CSS select each first div without class after div with class?

    How to have 3 sections in a row

    how to set width,height etc to particular table in html

    Show/hide stuff according to checkboxes using CSS: Why this code won´t work?

    How to create rounded shapes with css or SVG

    How can I create custom scrollbar (jScrollPane) with knockout binding?

    How to specify discrete mapper style in cytoscapejs?

    How to apply css to particular selected child in ivh-treeview?

    CSS: How to define spacing between responsive columns

    How to change CSS property with jQuery?

    How to create an integrated row in the table?

    How to give background image in CSS? [closed]

    How can I dynamically change element's width related with parent width using only CSS? [closed]

    how to vertically align the 2 different font sizes inside a single

    How to make nested divs appear as siblings with CSS?