Say goodbye to tables and hello to CSS div layouts!

Question

Say goodbye to tables and hello to CSS div layouts!

Is there a way to align three or four elements without relying on tables? I want them to follow this format:

The reason I am asking is because my current method involves using tables, but they are not allowing me to set a specific height for the "test" box while having the filler adjust accordingly. Currently, it only lets me assign a set height to the filler, and forces the "test" box to fill up all remaining space. If you can suggest a solution that allows me to define the height of the bottom row in a table, I would also consider that as an option. However, I believe utilizing CSS layouts would be the most effective approach.

html css alignment css-tables

Answer 1

Answer №1

Absolutely! You have the flexibility to create a table-like layout using a series of divs, similar to the one shown in your screenshot.

To achieve this layout, your HTML structure would look something like this:

<div class="header"><p>Top bar</p></div>
<div class="wrapper">
    <div id="leftCol">
        <div id="topLeft">Top Left</div>
        <div id="centerLeft">Filler</div>
        <div id="bottomLeft">Test</div>
    </div>

    <div id="rightCol">
        <p>SPAM!</p>                
        <div class="clear"></div>
    </div>
</div>

Then, you can style it like so:

.clear {
    clear: both;
}


#leftCol {
    float: left;
    width: 300px; /* set a specific width for the left column */
}

#topLeft {
    height: 100px; /* define an arbitrary height for the top left section; leave blank for auto-sizing */
}

#centerLeft {
    height: 50px; /* another arbitrary height */
}

#bottomLeft {
    height: 200px; /* yet another arbitrary height */
}

You can view a demonstration on JSFiddle as an example. Essentially, by floating your "left column" to the left, you allow your content to flow next to it on the right side.

Answer 2

Absolutely! You have the flexibility to create a table-like layout using a series of divs, similar to the one shown in your screenshot.

To achieve this layout, your HTML structure would look something like this:

<div class="header"><p>Top bar</p></div>
<div class="wrapper">
    <div id="leftCol">
        <div id="topLeft">Top Left</div>
        <div id="centerLeft">Filler</div>
        <div id="bottomLeft">Test</div>
    </div>

    <div id="rightCol">
        <p>SPAM!</p>                
        <div class="clear"></div>
    </div>
</div>

Then, you can style it like so:

.clear {
    clear: both;
}


#leftCol {
    float: left;
    width: 300px; /* set a specific width for the left column */
}

#topLeft {
    height: 100px; /* define an arbitrary height for the top left section; leave blank for auto-sizing */
}

#centerLeft {
    height: 50px; /* another arbitrary height */
}

#bottomLeft {
    height: 200px; /* yet another arbitrary height */
}

You can view a demonstration on JSFiddle as an example. Essentially, by floating your "left column" to the left, you allow your content to flow next to it on the right side.

Answer 3

Answer №2

Absolutely! Ensure that the left margin and width of each div are consistent, allowing you to adjust the top and bottom margins to your preference. By doing so, you can customize the height of any div as needed.

Answer 4

Absolutely! Ensure that the left margin and width of each div are consistent, allowing you to adjust the top and bottom margins to your preference. By doing so, you can customize the height of any div as needed.

Say goodbye to tables and hello to CSS div layouts!

Answer №1

Answer №2

Similar questions

Import JSON Data into Angular-nvD3 Chart (AngularJS)

Achieve a new line break when the user hits the "Enter" key using HTML and JavaScript

A handy hack for eluding XSS attacks

Is it possible to apply CSS based on a component's displayName?

Change the background color of cells according to the value they contain

Steps for Implementing an Event Listener in JavaScript

Where can I locate htmlWebpackPlugin.options.title in a Vue CLI 3 project or how can I configure it?

Seems like JavaScript's .active functionality is failing to function properly in my case

What is the reasoning behind the "open in a new tab" function triggering a GET request?

Firefox 3.5: The Notorious Code Copycat

Building a bespoke search input for the DataTables JQuery extension

The CSS styling is not being rendered correctly on the AngularJS HTML page

What is the best way to ensure that my grid remains contained within its designated area?

hyperlink to choose a specific option from a drop-down menu

When clicking initially, the default input value in an Angular 2 form does not get set

Is there an issue with this html code?

Creating a masterpiece on the final piece of paper

Implementing a Dynamic Navigation Feature using PHP in a Standalone File

What is the process for setting the active state for HtmlBodyElement?

centering headers using tailwind styles