Creating a layout where three divs are lined up next to each other, each with a height that spans

I am currently designing a website layout and I am working on setting up the CSS rules for the layout as shown in the image below:

My goal is to have the left and right divs extend to the height of the content div. However, I am not very familiar with the clear attribute and how to use it properly. Here's what I have implemented so far:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-7">
<title>Untitled Document</title>
<style type="text/css">
<!--

html, body
{
    height: 100%;
    min-height: 100%;
    margin: 0;
    padding: 0;
}
#header {
    background: url(images/header.png) no-repeat;
    margin-top: 0px;
    margin-right: auto;
    margin-bottom: 0px;
    margin-left: auto;
    clear: both;
    padding: 15px;
    width: 1013px;
    height: 46px;
}
#wrapper {
    clear: both;
    width: 1043px;
    margin-top: 10px;
    margin-right: auto;
    margin-bottom: 10px;
    margin-left: auto;
    height: 100%;
    min-height: 100%;
}
#content {
    background: #F00 url(images/fondo%20light.jpg) repeat;
    margin-top: 0px;
    margin-right: auto;
    margin-bottom: 0px;
    margin-left: auto;
    color: #333;
    z-index: 1;
    float: left;
    width: 985px;
    clear: none;
    padding: 0px;
    height: 150px;
}
#lines-left {
    background: url(images/lines-left.png) no-repeat;
    float: left;
    width: 17px;
    height: 100%;
    margin-left: 13px;
}
#lines-right {
    background: url(images/lines-right.png) no-repeat;
    float: right;
    width: 17px;
    height: 100%;
    padding: 0px;
    margin-top: 0px;
    margin-right: 11px;
    margin-bottom: 0px;
    margin-left: 0px;
}
body {
    background: url(images/dark-pattern.jpg);
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size: 11px;
    color: #FFF;
    margin: 0px;
}
#footer {
    background: url(images/footer.png) no-repeat;
    height: 140px;
    margin-top: 0px;
    margin-right: auto;
    margin-bottom: 0px;
    margin-left: auto;
    clear: both;
    padding: 15px;
    width: 1013px;
}
-->
</style>
</head>

<body>
<div id="wrapper">

<div id="header">Content for  id "header" Goes Here</div>
<div id="lines-left">&nbsp;</div>
<div id="content">Content for  id "content" Goes Here</div>
<div id="lines-right">&nbsp;</div>

<div id="footer">Content for  id "footer" Goes Here</div>

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

Answer №2

If you're interested, check out this website: Discover the amazing Holy Grail 3 column Liquid Layout here!

Answer №3

Exploring the World of CSS Fixed Positioning!

http://jsfiddle.net/XTdgP/

When you need 100% height and have fixed width/height columns and rows, using fixed positioning can make your life easier. It allows you to precisely control the position of every container edge in relation to the browser page.

Answer №4

Your solution is right here...

...it outlines the process for achieving equal column heights. For your specific inquiry about 2 columns, take a look at this demo...

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Combining a left div, a right div, and a center div to equal 100% width. What is the best

I currently have a main div and three additional divs contained within it: <div id="container" style="width:100%;"> <div id="left" style="width:201px; float:left;"> .... </div> <div id="centre" st ...

HTML form submitting with a symbol illustration

I am currently facing an issue with my website. I would like to create a search button using the symbol from fontawesome (<i class="fas fa-search"></i>), but I am unsure how to replace the form submission button with this symbol in order to sub ...

Tips for concealing the fourth child element within a list item

I'm facing an issue with a list of items rendered in my react component where I need to hide the 4th child of the list item. Here is the relevant html code: <div class="ExpandableContent-Content MyAccountTabList-ExpandableContentContent&qu ...

Creating interactive tables in HTML and Javascript where users can expand and collapse rows by clicking on a parent row

After days of trying to solve a specific issue, I have realized that I cannot do it without some help. The task at hand is to enable the functionality of clicking on a table row to reveal more details, but in my case, these additional details are presented ...

Ways to insert a hyperlink within a div element

Consider the following HTML structure: <article id="1919"> <div class="entry-content clearfix"> <div></div> <div></div> </div> </article> &l ...

Ensure the padding and margin are both set to 0 when using inline styles

As someone who is not a designer, I attempted to send an email from PHP. In order to do so, I took a template and converted all styles to inline. However, I am unsure of where to include the universal margin and padding style in the template. *{margin:0px ...

Unicef's animated web content

Looking to learn more about gate animation and zoom page transition on the Unicef website? I want to incorporate these cool animations into my own project. Can someone provide me with a "keyword" or point me in the right direction to find information on ...

Problem with showing div when hovering

I'm having trouble displaying a div on hover. When I hover over the div element A, the div element B appears as expected. However, when the mouse pointer leaves the div element A, the div element B does not disappear. $('.display_cal'). ...

Images on small screens are not displaying properly on responsive cards

I've been struggling with making a card responsive for smaller screens. No matter what I try, some of the images get cut off when the screen size is reduced. I need to keep it small enough to fit on a small screen without sacrificing the appearance on ...

Expanding using CSS3 to ensure it doesn't take up previous space

Currently, I am working on an animation for my web application. More specifically, I am looking to scale certain elements using CSS3 with the scaleY(0.5) property. These elements are arranged in a vertical list, and I want to ensure that they do not take u ...

The orientation of the navbar is set to vertical rather than horizontal

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css"> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script> <div id="navigation"> ...

Quickest method to create a new empty stylesheet in the developer tool of Chrome's inspector ("Inspector stylesheet")

When testing CSS modifications live in Chrome, I typically use the following method: Right click > Inspect Then, I use the bottom right panel and click the + button to add a new class which I can edit directly. https://i.sstatic.net/VX57R.jpg Howe ...

Tips for incorporating a smooth fade in and out effect into images within a Bootstrap 5 carousel

I'm currently working with a Bootstrap 5 carousel and trying to implement a transition effect where clicking the "next" arrow will smoothly fade out the current image before fading in the next one. This is necessary because the images in my carousel v ...

What exactly does this jquery library aim to achieve?

Recently, I discovered a new library for CSS3 animations. As someone who is still learning JavaScript, I am unsure of the benefits it offers. It appears to replicate what jQuery can already achieve but by utilizing CSS3. So, what advantage does using a to ...

Looking for a single solution to have my background image in CSS cover the entire screen on both my computer and cell phone

I used the following code in my demo .html file: body{ background-image: url('https://i0.wp.com/www.socialnews.xyz/wp-content/uploads/2020/10/26/5573c6f0bee7ca021f4a8aecbaf6cbeb.jpg?quality=80&zoom=1&ssl=1'); -webkit-backgroun ...

Highcharts: Show tooltip above all elements

Is there a way to configure tooltip display above all elements? I want to define specific coordinates so that the tooltip remains open even if it is covering the chart, and only closes when interacting with the top block. Screenshot 1 Screenshot 2 For e ...

Bypassing CSS rules for elements not present in the DOM

In case an element is absent from the DOM, I want to include margin space. Conversely, if the element is present, no margin space should be added. I have experimented with CSS for this purpose: A - To ensure there is no margin-top if the H2 title is displ ...

How can I display a blank date picker using Material UI in a REACT application?

CURRENT SETUP <MuiPickersUtilsProvider utils={DateFnsUtils}> <DatePicker fullWidth value={dob} label="Date of Birth" format="dd / MM / yyyy" margin="normal" maxDate={new Date() ...

Components drifting apart following viewport adjustments

Can someone help me with this issue in responsiveness? When I change the viewport, my header and main elements seem to be moving far apart from each other. View the code on JSFiddle <header> <div class="slider"> <img src="picture1" al ...

Is using transform scale in CSS to scale SVG sprites a valid method of scaling?

I have been using an SVG sprite as a CSS background image in this manner: .icon-arrow-down-dims { background: url("../sprite/css-svg-sprite.svg") no-repeat; background-position: 16.666666666666668% 0; width: 32px; height: 32px; display: inline-b ...