tips for organizing the <div> element horizontally within a design

Question

tips for organizing the <div> element horizontally within a design

I have reviewed some similar questions that have been posted and attempted to apply their solutions to my code. However, I am still encountering difficulties. Below is the code that I need help with. I am looking to organize the main content along with three smaller contents beneath it, as well as position the footer at the bottom of the page.

<!DOCTYPE html>
<html>
<head>
    <title> CSS Attempt </title>
     <style type="text/css">
#container {width: 960px; margin: 0 auto; background:#ffffff; border:1px solid black; height:500px;}
#header { background:#ffffff; height:60px;}
#navigation {width:960px;background:#555555;text-align:left; height:35px;}
#sidebar {width:170px; height: 300px; text-align: left; border-right: 5px solid grey; list-style: none; margin-top: 20px; margin-left: 20px; float:left;}
#content {width:750px; height:150px; background-color: #333333; margin-left:190px; float: right; margin-top:0px   }
#display {width: 220px;height:200px;background-color: #cccccc }
#center {width: 220px;height:200px; border:2px solid black }
#footer {width:960px;text-align:right; height:35px; float: right;}
 </style>
</head>


<body>
<div id="container">
        <div id="header">
        <p><img src="logo.png" alt = "Image not available"></p>
        </div>

    <div id="navigation">
    <p>Home</p>
    </div>
    <div id="sidebar">
    <p> Left Content </p>
    </div>
    <div id = "content">
    <p> Main Content </p>
    <div id = "display">
    <p> Content 1</p>
    </div>
    <div id = "center">
    <p> Central Content </p>
    </div>
    <div id = "display">
     <p> Content 2</p>
    </div>
    </div>
    <div id = "footer">
     <p> copyright </p>
    </div>

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

html css

Answer 1

Answer №1

Utilizing CSS3 flex box allows for easy alignment of boxes next to each other:

<!DOCTYPE html>
<html>
<head>
    <title> CSS Attempt </title>
     <style type="text/css">
#container {width: 960px; margin: 0 auto; background:#ffffff; border:1px solid black; height:500px;}
#header { background:#ffffff; height:60px;}
#navigation {width:960px;background:#555555;text-align:left; height:35px;}
#sidebar {width:170px; height: 300px; text-align: left; border-right: 5px solid grey; list-style: none; margin-top: 20px; margin-left: 20px; float:left;}
#content {width:750px; height:200px; background-color: #333333;margin: 20px 0 0 20px; float: right; }
#display {width: 220px;height:200px;background-color: #cccccc }
#center {width: 220px;height:200px; border:2px solid black }
#footer {width:960px;text-align:right; height:35px; float: right;}
.leftAndMain {display: flex;}
.mainInnerContents {display: flex;}
 </style>
</head>


<body>
<div id="container">
        <div id="header">
        <p><img src="logo.png" alt = "Image not available"></p>
        </div>

    <div id="navigation">
    <p>Home</p>
    </div>
<div class="leftAndMain">
    <div id="sidebar">
    <p> Left Content </p>
    </div>

    <div id = "content">
    <p> Main Content </p>
    <div class="mainInnerContents">
        <div id = "display">
        <p> Content 1</p>
        </div>
        <div id = "center">
        <p> Central Content </p>
        </div>
        <div id = "display">
         <p> Content 2</p>
        </div>
    </div>

    </div>
</div>
    <div id = "footer">
     <p> copyright </p>
    </div>

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

Only two additional divs have been added with classes class="leftAndMain" and class="mainInnerContents".

Additionally, two lines have been included in the <style> tag:

.leftAndMain {display: flex;}
.mainInnerContents {display: flex;}

Minor adjustments were made to the #content section as well.

Answer 2

Utilizing CSS3 flex box allows for easy alignment of boxes next to each other:

<!DOCTYPE html>
<html>
<head>
    <title> CSS Attempt </title>
     <style type="text/css">
#container {width: 960px; margin: 0 auto; background:#ffffff; border:1px solid black; height:500px;}
#header { background:#ffffff; height:60px;}
#navigation {width:960px;background:#555555;text-align:left; height:35px;}
#sidebar {width:170px; height: 300px; text-align: left; border-right: 5px solid grey; list-style: none; margin-top: 20px; margin-left: 20px; float:left;}
#content {width:750px; height:200px; background-color: #333333;margin: 20px 0 0 20px; float: right; }
#display {width: 220px;height:200px;background-color: #cccccc }
#center {width: 220px;height:200px; border:2px solid black }
#footer {width:960px;text-align:right; height:35px; float: right;}
.leftAndMain {display: flex;}
.mainInnerContents {display: flex;}
 </style>
</head>


<body>
<div id="container">
        <div id="header">
        <p><img src="logo.png" alt = "Image not available"></p>
        </div>

    <div id="navigation">
    <p>Home</p>
    </div>
<div class="leftAndMain">
    <div id="sidebar">
    <p> Left Content </p>
    </div>

    <div id = "content">
    <p> Main Content </p>
    <div class="mainInnerContents">
        <div id = "display">
        <p> Content 1</p>
        </div>
        <div id = "center">
        <p> Central Content </p>
        </div>
        <div id = "display">
         <p> Content 2</p>
        </div>
    </div>

    </div>
</div>
    <div id = "footer">
     <p> copyright </p>
    </div>

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

Only two additional divs have been added with classes class="leftAndMain" and class="mainInnerContents".

Additionally, two lines have been included in the <style> tag:

.leftAndMain {display: flex;}
.mainInnerContents {display: flex;}

Minor adjustments were made to the #content section as well.

Answer 3

Answer №2

There seems to be a glitch in the HTML code structure you provided. It is crucial to ensure that each element has a unique ID, but in your case, there are two elements with the same ID - display. I have rectified this by renaming the second instance to display2. However, it might be more advisable to utilize classes for styling purposes instead of relying solely on IDs.

In the following snippet, the three blocks are set to display as table cells, positioning them next to each other. The footer is cleared to ensure it appears below the left floated sidebar. Additionally, the float property of the content itself has been removed to allow it to display adjacent to the sidebar.

/* Display the three block as cells, so they are next to each other. 
   You may specify a width for each of them. */
#display,
#center,
#display2 {
  display: table-cell;
}
#container {
  /* Removed float here. Content is just adjacent to side bar. */
  width: 960px;
  margin: 0 auto;
  background: #ffffff;
  border: 1px solid black;
  height: 500px;
}
#header {
  background: #ffffff;
  height: 60px;
}
#navigation {
  width: 960px;
  background: #555555;
  text-align: left;
  height: 35px;
}
#sidebar {
  width: 170px;
  height: 300px;
  text-align: left;
  border-right: 5px solid grey;
  list-style: none;
  margin-top: 20px;
  margin-left: 20px;
  float: left;
}
#content {
  height: 150px;
  background-color: #333333;
  margin-left: 190px;
  margin-top: 0px
}
#display {
  width: 220px;
  height: 200px;
  background-color: #cccccc
}
#center {
  width: 220px;
  height: 200px;
  border: 2px solid black
}
#footer {
  width: 960px;
  text-align: right;
  height: 35px;
  /* Clear to force the footer to the bottom. Add a border to show that this is working */
  border: 1px solid red;
  clear: both;
}

<!DOCTYPE html>
<html>

<head>
  <title>CSS Attempt</title>
</head>


<body>
  <div id="container">
    <div id="header">
      <p>
        <img src="logo.png" alt="Image not available">
      </p>
    </div>

    <div id="navigation">
      <p>Home</p>
    </div>
    <div id="sidebar">
      <p>Left Content</p>
    </div>
    <div id="content">
      <p>Main Content</p>
      <div id="display">
        <p>Content 1</p>
      </div>
      <div id="center">
        <p>Central Content</p>
      </div>
      <div id="display2">
        <p>Content 2</p>
      </div>
    </div>
    <div id="footer">
      <p>copyright</p>
    </div>

  </div>
</body>

</html>

Answer 4

There seems to be a glitch in the HTML code structure you provided. It is crucial to ensure that each element has a unique ID, but in your case, there are two elements with the same ID - display. I have rectified this by renaming the second instance to display2. However, it might be more advisable to utilize classes for styling purposes instead of relying solely on IDs.

In the following snippet, the three blocks are set to display as table cells, positioning them next to each other. The footer is cleared to ensure it appears below the left floated sidebar. Additionally, the float property of the content itself has been removed to allow it to display adjacent to the sidebar.

/* Display the three block as cells, so they are next to each other. 
   You may specify a width for each of them. */
#display,
#center,
#display2 {
  display: table-cell;
}
#container {
  /* Removed float here. Content is just adjacent to side bar. */
  width: 960px;
  margin: 0 auto;
  background: #ffffff;
  border: 1px solid black;
  height: 500px;
}
#header {
  background: #ffffff;
  height: 60px;
}
#navigation {
  width: 960px;
  background: #555555;
  text-align: left;
  height: 35px;
}
#sidebar {
  width: 170px;
  height: 300px;
  text-align: left;
  border-right: 5px solid grey;
  list-style: none;
  margin-top: 20px;
  margin-left: 20px;
  float: left;
}
#content {
  height: 150px;
  background-color: #333333;
  margin-left: 190px;
  margin-top: 0px
}
#display {
  width: 220px;
  height: 200px;
  background-color: #cccccc
}
#center {
  width: 220px;
  height: 200px;
  border: 2px solid black
}
#footer {
  width: 960px;
  text-align: right;
  height: 35px;
  /* Clear to force the footer to the bottom. Add a border to show that this is working */
  border: 1px solid red;
  clear: both;
}

<!DOCTYPE html>
<html>

<head>
  <title>CSS Attempt</title>
</head>


<body>
  <div id="container">
    <div id="header">
      <p>
        <img src="logo.png" alt="Image not available">
      </p>
    </div>

    <div id="navigation">
      <p>Home</p>
    </div>
    <div id="sidebar">
      <p>Left Content</p>
    </div>
    <div id="content">
      <p>Main Content</p>
      <div id="display">
        <p>Content 1</p>
      </div>
      <div id="center">
        <p>Central Content</p>
      </div>
      <div id="display2">
        <p>Content 2</p>
      </div>
    </div>
    <div id="footer">
      <p>copyright</p>
    </div>

  </div>
</body>

</html>

tips for organizing the <div> element horizontally within a design

Answer №1

Answer №2

Similar questions

Stopping all animations with JQuery animate()

The display of website content across various screens

Tips for achieving a seamless appearance with box-shadow on the left and right sides of various elements

Identify Bootstrap modal to modify destination of keypress input

Identify the significance within an array and employ the filter function to conceal the selected elements

Having trouble with a basic jQuery selector not functioning as expected

``There seems to be an issue with implementing the SlideDown feature in JavaScript

Storing Selenium WebElement in memory for extended periods to retrieve its details: A guide in C#

Two divs positioned on the left side and one div positioned on the right side

What could be causing the malfunction of the .setAttribute() and .removeAttribute functions in my JavaScript program?

Sometimes the downloaded xlsx file may become corrupted

Embedding a CSS class within the primary class selector

Boosting Your SCSS (SASS) Productivity

Accumulation of style from various directives in AngularJS on a single element

Email confirmation section

Combine going to an anchor, performing an AJAX request, and opening a jQuery-UI accordion tab all within a

Can someone provide assistance on how to add an icon to a button?

What is the best way to dynamically update or display unique CSS styles when a service is invoked or provides a response in AngularJS using JavaScript

Position tables on the right side of adjacent tables

Resolving the issue: "Unable to destructure the 'Title' property of 'fac' as it is undefined" in React JS