Arrange divs next to each other using CSS

Question

Arrange divs next to each other using CSS

I am currently working with a basic layout on my webpage

 <div id="content-wrap">
        <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <div id="content" style="height: 550px">

        </div>
        </form>
 </div>

Here is the CSS associated with it:

#content-wrap
{
 clear: both;
 float: left;
 width: 100%;
}
#content
{
 text-align: left;
 padding: 0;
 margin: 0 auto;
 height: 470px;
 overflow: auto;
    width: 760px;
}

The goal now is to have another div positioned next to "content", floating and fixed at 200px in width. How can I achieve this?

Thank you in advance for any assistance provided.

html css

Answer 1

Answer №1

My apologies, I may have misunderstood your request earlier. Here is an updated version, hopefully it meets your needs:

<html>
<head>
<style type="text/css">
    #content-wrap
    {
     background-color: #EEE;
     clear: both;
     float: left;
     width: 100%;
    }
    #content
    {
     background-color: #0F0;
     text-align: left;
     padding: 0;
     margin: 0 auto;
     height: 470px;
     width: 760px;
    }
    #leftbar
    {
     background-color: #F00;
     float: left;
     width: 200px;
     height: 470px;
     margin-left: -200px;
    }
</style>
</head>
<body>
  <div id="content-wrap">
    <form id="form1" runat="server">
      <div id="content">
        <div id="leftbar">

        </div>
      </div>
    </form>
  </div>
</body>
</html>

Answer 2

My apologies, I may have misunderstood your request earlier. Here is an updated version, hopefully it meets your needs:

<html>
<head>
<style type="text/css">
    #content-wrap
    {
     background-color: #EEE;
     clear: both;
     float: left;
     width: 100%;
    }
    #content
    {
     background-color: #0F0;
     text-align: left;
     padding: 0;
     margin: 0 auto;
     height: 470px;
     width: 760px;
    }
    #leftbar
    {
     background-color: #F00;
     float: left;
     width: 200px;
     height: 470px;
     margin-left: -200px;
    }
</style>
</head>
<body>
  <div id="content-wrap">
    <form id="form1" runat="server">
      <div id="content">
        <div id="leftbar">

        </div>
      </div>
    </form>
  </div>
</body>
</html>

Answer 3

Answer №2

One way to achieve the desired layout is by center aligning the #content-wrap div and then using absolute positioning for the two inner divs inside it. Since you are working with fixed-width divs, this approach should work well.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Test</title>
<style type="text/css">
    #content-wrap {
        position: relative;
        margin: 0 auto;
        width: 900px;
        height: 600px;
        background: #eeeeee;
    }

    #content {
        position: absolute;
        left: 215px;
        width: 470px;
        height: 600px;
        background: #cccccc;
    }

    #sidebar {
        position: absolute;
        background: #aaaaaa;
        left: 0;
        height: 600px;
        width: 200px;
    }
</style>
</head>
    <body>
        <div id="content-wrap">
            <div id="content"></div>
            <div id="sidebar"></div> 
        </div>

    </body>
</html>

Answer 4

One way to achieve the desired layout is by center aligning the #content-wrap div and then using absolute positioning for the two inner divs inside it. Since you are working with fixed-width divs, this approach should work well.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Test</title>
<style type="text/css">
    #content-wrap {
        position: relative;
        margin: 0 auto;
        width: 900px;
        height: 600px;
        background: #eeeeee;
    }

    #content {
        position: absolute;
        left: 215px;
        width: 470px;
        height: 600px;
        background: #cccccc;
    }

    #sidebar {
        position: absolute;
        background: #aaaaaa;
        left: 0;
        height: 600px;
        width: 200px;
    }
</style>
</head>
    <body>
        <div id="content-wrap">
            <div id="content"></div>
            <div id="sidebar"></div> 
        </div>

    </body>
</html>

Arrange divs next to each other using CSS

Answer №1

Answer №2

Similar questions

"I am facing an issue where the button does not appear centered after using jQuery

Creating an Angular form that adapts to changing input values

Using JavaScript to dynamically retrieve element IDs

Replacing hyperlinks based on the user agent of a mobile device can be done using a few

Assistance needed with incorporating an additional link button into the extensive menu

Is it possible to utilize a variable in determining the order of operations?

What is the best way to integrate an admin template into a website without relying on popular CMS platforms like WordPress?

Is there a way to disable a dropdown menu when clicking on a different one?

Hello there! I'm currently working on implementing a button that will alter the CSS grid layout

Interactive Sidebar Navigation Content

Removing an element that is floated inside a parent element with other floated and non-floated siblings in Chrome

Ways to create a scrollable div with the help of Javascript

Can the ::before selector be used in HTML emails?

Display an Asterisk Icon for md-input fields with lengthy labels

Setting boundaries for <td> widths: min-width and max-width

What is the best way to dynamically convert a lodash object (specifically a filter object) into jQuery's listview component?

Solving the Issue of Assigning a Random Background Color to a Dynamically Created Button from a Selection of Colors

The process of transmitting messages back and forth between a popup script and a content script

Ensure that grid rows occupy the least amount of space possible

The input data from the MySQL database requires two page refreshes in order to be retrieved