What is the best way to position divs on opposite ends around another div?

Question

What is the best way to position divs on opposite ends around another div?

I have experimented with this scenario so far,

My goal is to position two divs on the left and right sides within another div, using float:left and float:right resulted in them appearing on separate lines.

What I envision is something like this,

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

I apologize for not being able to provide a clearer representation.

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: I managed to address the issue by using the float property. I now have another query - how can I vertically center align text within a container div?

html css

Answer 1

Answer №1

To achieve the desired layout, utilize CSS's float property to position elements either to the left or right.

View the revised code example here: http://jsfiddle.net/BXSJe/820/

I trust this information proves useful. :)

Answer 2

To achieve the desired layout, utilize CSS's float property to position elements either to the left or right.

View the revised code example here: http://jsfiddle.net/BXSJe/820/

I trust this information proves useful. :)

Answer 3

Answer №2

To implement this layout, you will need to structure your HTML and CSS code as follows:

<div id="mainDiv">
    <div id="floatLeft">Content floated to the left here</div>
    <div id="floatRight">Content floated to the right here</div>
</div>

For the styling, use the following CSS rules:

div {
    background-color: Red;
    height: 100px;
    width: 100%;
}

#floatLeft {
    width: 100px;
    float: left;
    background-color: Blue;
}

#floatRight {
    width: 100px;
    float: right;
    background-color: Gray;
}

You can view a live demo of this code here: http://jsfiddle.net/g6U8n/

I hope this explanation helps you achieve the desired layout!

Answer 4

To implement this layout, you will need to structure your HTML and CSS code as follows:

<div id="mainDiv">
    <div id="floatLeft">Content floated to the left here</div>
    <div id="floatRight">Content floated to the right here</div>
</div>

For the styling, use the following CSS rules:

div {
    background-color: Red;
    height: 100px;
    width: 100%;
}

#floatLeft {
    width: 100px;
    float: left;
    background-color: Blue;
}

#floatRight {
    width: 100px;
    float: right;
    background-color: Gray;
}

You can view a live demo of this code here: http://jsfiddle.net/g6U8n/

I hope this explanation helps you achieve the desired layout!

Answer 5

Answer №3

To enhance your code, consider adding some additional properties. Take a look below:


<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%;
    display:inline-block;
    float:left;
}

#rightcap {
    width:10%;
    display:inline-block;
    float:right;
}

#leftcap, #rightcap {
    height:100%;
    width:10%;
    background:red;
}

These additions should enhance your code. Good luck! :)

Answer 6

To enhance your code, consider adding some additional properties. Take a look below:


<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%;
    display:inline-block;
    float:left;
}

#rightcap {
    width:10%;
    display:inline-block;
    float:right;
}

#leftcap, #rightcap {
    height:100%;
    width:10%;
    background:red;
}

These additions should enhance your code. Good luck! :)

What is the best way to position divs on opposite ends around another div?

Answer №1

Answer №2

Answer №3

Similar questions

Is it possible to pass multiple IDs into document.getElementById?

I'm just starting to dabble in Perl and am curious about a few things regarding regular expressions

Error Encountered: POST method not supported in ajax request using djangoIs this a

A method to apply a class to the third <li> element using javascript

Generating a table with two columns utilizing ng-repeat

Parent whose height is less than that of the child element

The functionality of cloning in jQuery may encounter an issue where the text field remains enabled if the user selects an option labeled "other

A guide to displaying the date retrieved from a JSON data file API request using JavaScript

Using a variable with the :contains selector

Automatically adjusting the top margin of the main content section depending on the variable height of a fixed header

Looking for a jQuery plugin that helps with form alignment?

Display the spinner until the data is successfully updated in the DOM using Angular

Learn the steps to Toggle Javascript on window resize

Why is the AJAX request not functioning properly after using jQuery's hide method?

Step-by-step guide to swapping an element with a textarea element using javascript

If a radio button is chosen, the input field must be filled out

How do you determine the dimensions of a background image?

Material UI - Clear all designs from the slate

Dynamic Loading of Hovercards using jQuery AJAX