Arranging 2 divs within a parent div using CSS placement

Question

Arranging 2 divs within a parent div using CSS placement

In my design, I have a main div with 100% width, containing two inner divs. One of the inner divs has a fixed width of 200px, and I want the other inner div to fill up the remaining space, like this:

  -----------------this is main div -------------
 |                                               |
 | ----subdiv1 (200px)---- --subdiv2-----------|
 ||                    |  |                   ||
 |------------------------ -------------------- |
 |----------------------------------------------|

I have been trying to figure out how to make subdiv2 take up the rest of the empty space while ensuring that subdiv1 stays at 200px. I searched on Google for a solution but couldn't find one.

css html positioning

Answer 1

Answer №1

Check out this solution I came up with by using a float: left rule for the div on the left, and a margin-left rule for the div on the right: http://jsfiddle.net/P4xMj/

Sample HTML:

<div id="container">
    <div id="left">
        Content here
    </div>
    <div id="right">
        More content goes here on the right side. Let's make this text really long to test wrapping more than one or two lines. Additional text to fill up space.
    </div>
</div>

Sample CSS (background colors used for clarity):

#container {
    background: #FF0;
    overflow: auto;
    padding: 10px;
}

#left {
    background: #0F0;
    float: left;
    width: 200px;
}

#right {
    background: #F00;
    margin-left: 210px;
}

Answer 2

Check out this solution I came up with by using a float: left rule for the div on the left, and a margin-left rule for the div on the right: http://jsfiddle.net/P4xMj/

Sample HTML:

<div id="container">
    <div id="left">
        Content here
    </div>
    <div id="right">
        More content goes here on the right side. Let's make this text really long to test wrapping more than one or two lines. Additional text to fill up space.
    </div>
</div>

Sample CSS (background colors used for clarity):

#container {
    background: #FF0;
    overflow: auto;
    padding: 10px;
}

#left {
    background: #0F0;
    float: left;
    width: 200px;
}

#right {
    background: #F00;
    margin-left: 210px;
}

Answer 3

Answer №2

To achieve the desired layout, make sure to include float:left; in the styling of your subdiv1. Below is the code snippet that demonstrates how this can be implemented:

<div>
  <div style="float:left;width:200px;background:#0F0">
  SUBDIV1
  </div>
  <div style="background:#F00;">
  SUBDIV2
  </div>
</div>

In essence, remember to apply float:left; to your subdiv1.

Answer 4

To achieve the desired layout, make sure to include float:left; in the styling of your subdiv1. Below is the code snippet that demonstrates how this can be implemented:

<div>
  <div style="float:left;width:200px;background:#0F0">
  SUBDIV1
  </div>
  <div style="background:#F00;">
  SUBDIV2
  </div>
</div>

In essence, remember to apply float:left; to your subdiv1.

Answer 5

Answer №3

To align the left div to the left and create a 200px margin on the right div, you can use CSS properties like float: left and margin-left: 200px.

Check out this JSFiddle for a live example: http://jsfiddle.net/SpxH9/

Here's the HTML structure:

<div id="container">
    <div id="left">left</div>
    <div id="right">right</div>
</div>

And here's the CSS code:

#container {
    overflow: hidden;
}
#left {
    float: left;
    width: 200px;
}
#right {
    margin-left: 200px;
}

Another technique that can be used is replacing margin-left with overflow: hidden. This method eliminates the need to specify dimensions twice and makes adapting to changes easier.

For instance, with 10px borders applied: http://jsfiddle.net/SpxH9/1/

#container {
    overflow: hidden;
}
#left {
    float: left;
    width: 200px;
}
#right {
    overflow: hidden;
}

If you attempt the same approach with manual calculation of dimensions, it can be challenging as demonstrated here: http://jsfiddle.net/SpxH9/2/ (fixed version: http://jsfiddle.net/SpxH9/3/)

Lastly, using overflow: hidden on #container helps contain the floats, but an alternative method like clearfix could also be considered.

Answer 6

To align the left div to the left and create a 200px margin on the right div, you can use CSS properties like float: left and margin-left: 200px.

Check out this JSFiddle for a live example: http://jsfiddle.net/SpxH9/

Here's the HTML structure:

<div id="container">
    <div id="left">left</div>
    <div id="right">right</div>
</div>

And here's the CSS code:

#container {
    overflow: hidden;
}
#left {
    float: left;
    width: 200px;
}
#right {
    margin-left: 200px;
}

Another technique that can be used is replacing margin-left with overflow: hidden. This method eliminates the need to specify dimensions twice and makes adapting to changes easier.

For instance, with 10px borders applied: http://jsfiddle.net/SpxH9/1/

#container {
    overflow: hidden;
}
#left {
    float: left;
    width: 200px;
}
#right {
    overflow: hidden;
}

If you attempt the same approach with manual calculation of dimensions, it can be challenging as demonstrated here: http://jsfiddle.net/SpxH9/2/ (fixed version: http://jsfiddle.net/SpxH9/3/)

Lastly, using overflow: hidden on #container helps contain the floats, but an alternative method like clearfix could also be considered.

Arranging 2 divs within a parent div using CSS placement

Answer №1

Answer №2

Answer №3

Similar questions

Having trouble with bootstrap carousel malfunctioning on Firefox browser?

Safari (on both mobile and Mac) has experienced a change in the hitbox for buttons

The information from the textarea and select option is not getting through to the email

Flip an image by analyzing the colors beneath it

Crafting a Javascript Email Event: A Step-by-Step Guide

Image floating next to a table

How to use CSS animations to remove an element from the DOM

Angular application experiencing issues with fixed headers not scrolling correctly

Adjust the color of the button upon hovering with CSS

What is causing my HTML file path to function on my server, but not when I access the HTML file directly?

Having trouble retrieving JSON data from backend server in Svelte framework

The content in an app using Ionic and Angular is being obstructed by the bottom tabs, preventing users

Creating a versatile PHP script capable of managing multiple forms

Looking for assistance with verifying the winning criteria for a Tic-Tac-Toe game coded in JavaScript

Initiate the React application with the given external parameters

Developing an HTML table for room reservations using PHP - a comprehensive booking system

Repositioning elements within the web browser

Utilizing Javascript to Extract Data from Twitter Json Files

The Bootstrap 4 carousel link takes precedence over any other links on the page

Adjust size of item within grid component in VueJS