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..

    How-to mix fixed and percentage heights/width using css without javascript

    How to slowly move header while user scrolls the page?

    How to Include CSS and JS files via HTTPS when needed?

    How to get element to fill 100% height of parent

    How to make html lists horizontal in css?

    How to apply CSS rotate transition around glyph's vertical middle or centerpoint

    How do I display a randomly generated list in columns with CSS?

    GWT - How to create a drop down menu

    How to Slant/Skew only the bottom of the div

    • centered, not moving down.. unsure why / how to fix

    How to integrate site and iframe scroll bar?

    How to change class of all children with jquery?

    CSS Bootstrap AngularJS - How to reduce table row height?

    Twitter boostrap and css: How to remove the modal overlay and refocus on the input box, so the users can type with the modal open

    How to take a div that is off screen and translate it to the middle of the screen using translateX()

    How to retain CSS transform scale on checked state

    When I hover left/right side of a div how do I display previous/next button (using CSS/jQuery)

    How can I get mobile safari to use the right CSS?

    How to place an image properly with CSS

    CSS- how to prevent the original title info to be displayed

    How to position CSS fixed JQuery dropdown bar

    How to change
  • to variable width on css dropdown submenu
  • how to give dynamic height in css

    How to use CSS Class and ID selectors

    How to stretch an input button to available width and center it's text using CSS padding and text-indent?

    How to split page in half using CSS?

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

    How do I hide all children except the for the first child in Javascript/JQuery and CSS?

    How to implement single-line ellipsis with CSS

    popup mask is very very quickly shown