Position two child divs side by side within a parent div

Question

Position two child divs side by side within a parent div

Here's what I have accomplished so far: http://jsfiddle.net/cHKF4/3/

However, I am aiming to incorporate small boxes (box1 and box2 inside late)

#late {
    position: relative;
    border-style: solid;
    border-width: 3px;
    border-color: #00fff3;
    height: 200px;
    width: 960px;
    margin: 0 auto;
    margin-top: 30px;
}

#box1 {
    position: relative;
    border-style: solid;
    border-width: 1px;
    border-color: #55fff3;
    height: 100%;
    width: 200px;
    margin: 0 auto;
}

#box2 {
    position: relative;
    border-style: solid;
    border-width: 3px;
    border-color: #55fff3;
    height: 100%;
    width: 200px;
}

Appreciate your help.

html css

Answer 1

Answer №1

Would this solution work for your needs (box1 and box2 positioned side by side and centered within late, with late centered on the webpage) :

<div id="late">
    <div id="inner">
       <div id="box1"></div>
       <div id="box2"></div>
    </div>
</div>

#late {
    border: solid 3px #00fff3;
    height: 200px;
    width: 960px;
    margin: 30px auto 0 auto;
}

#inner {
    width: 408px;
    height: 100%;
    margin: 0 auto 0 auto;
}

#box1 {
    border: solid 1px #55fff3;
    height: 100%;
    width: 200px;
    float: left;
}

#box2 {
    border: solid 3px #55fff3;
    height: 100%;
    width: 200px;
    float: left;
}

Answer 2

Would this solution work for your needs (box1 and box2 positioned side by side and centered within late, with late centered on the webpage) :

<div id="late">
    <div id="inner">
       <div id="box1"></div>
       <div id="box2"></div>
    </div>
</div>

#late {
    border: solid 3px #00fff3;
    height: 200px;
    width: 960px;
    margin: 30px auto 0 auto;
}

#inner {
    width: 408px;
    height: 100%;
    margin: 0 auto 0 auto;
}

#box1 {
    border: solid 1px #55fff3;
    height: 100%;
    width: 200px;
    float: left;
}

#box2 {
    border: solid 3px #55fff3;
    height: 100%;
    width: 200px;
    float: left;
}

Answer 3

Answer №2

I'm not entirely clear on the goal you're aiming for. Are you attempting to center #box1 and #box2 within #late?

If you simply want to place them next to each other inside #late, here is my preferred method: http://codepen.io/SaraSmith/pen/oPqwe

Answer 4

I'm not entirely clear on the goal you're aiming for. Are you attempting to center #box1 and #box2 within #late?

If you simply want to place them next to each other inside #late, here is my preferred method: http://codepen.io/SaraSmith/pen/oPqwe

Answer 5

Answer №3

To achieve the desired layout, apply the style float:left to both #box1 and #box2

#box1 {
    float:left;
    position: relative;
    border-style: solid;
    border-width: 3px;
    border-color: #55fff3;
    height: 100%;
    width: 200px;
}

#box2 {
    float:left;
    position: relative;
    border-style: solid;
    border-width: 3px;
    border-color: #55fff3;
    height: 100%;
    width: 200px;
}

Answer 6

To achieve the desired layout, apply the style float:left to both #box1 and #box2

#box1 {
    float:left;
    position: relative;
    border-style: solid;
    border-width: 3px;
    border-color: #55fff3;
    height: 100%;
    width: 200px;
}

#box2 {
    float:left;
    position: relative;
    border-style: solid;
    border-width: 3px;
    border-color: #55fff3;
    height: 100%;
    width: 200px;
}

Answer 7

Answer №4

Experiment with this!

#box2 {
position: fixed;
top: 20px;
left: 20px;
}

Ensure the parent container maintains a relative position.

Answer 8

Experiment with this!

#box2 {
position: fixed;
top: 20px;
left: 20px;
}

Ensure the parent container maintains a relative position.

Position two child divs side by side within a parent div

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Is there a way to update an image dynamically within CSS using the :before pseudo-element?

Tips for generating a new div for every iteration:

Center align a font-awesome icon vertically next to a paragraph of text

Emphasize multiple anchor points

The combination of loading and scrolling JavaScript code is not functioning properly on the website

Hide only the table that is being clicked on, not all tables

The getBBox() method of SVG:g is returning an incorrect width value

Extract content from an HTML element and transfer it to PHP

What is the best way to keep a header row in place while scrolling?

Revolutionizing Zen Cart with slimMenu

What is the method for adjusting the success button's color using SASS?

Trouble organizing a collection of destinations based on their geolocation and proximity

Error in Angular 2 component when loading background images using relative URLs from an external CSS skin

Trigger video to play or pause with every click event

Enhance your images with a hover zoom effect while viewing an overlay on top

AngularJS Validation does not verify the step limitation of an HTML number input field

HTML5 full-screen API and its compatibility with different browsers

How to achieve horizontal auto-scrolling in an image gallery with jQuery?

Enabling the autowidth label expands the width of the td element

What is the best way to include a background image in a div within a React component?