3-Column Layout with Left-Floated Columns Displaying Incorrect Order

Question

3-Column Layout with Left-Floated Columns Displaying Incorrect Order

Currently, I am in the process of converting a 3-column website to be responsive by using percentages and em's instead of negative pixel margins. This will ensure that the site functions well on various devices.

I am facing a similar issue as discussed in this post: HTML float right element order

Following the advice given in this article by @bookcassey, I have placed all columns in a container that is floated right, with child elements inside floated left. However, I am still struggling to get the columns in the correct order (#NavColumn #ContentColumn #ExtraColumn).

The HTML code looks like this:

<!DOCTYPE html>

<html>

<head>

<title>3 Col Page</title>

<meta name='description' content='Sample 3 Column Page'>

<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" type="text/css" href="style.css" />

<link rel="stylesheet" type="text/css" media="screen and (max-width: 800px)" href="./support-files/landscapemobile.css" />

<link rel="stylesheet" type="text/css" media="screen and (max-width: 480px)" href="mobile.css" />

</head>
<body>

<div id="PageWrapper">
    <div id="Header">
    <div class="Liner">

    Header Links Etc

    </div> <!-- End Header Liner -->
    </div> <!-- End Header -->

    <!-- Begin Center Column Content -->
    <div class="OuterBG threecol"> <!-- disregard. There are no rules for this. This was part of a tut-->
    <div class="MidBG"> <!-- disregard. There are no rules for this. This was part of a tut-->
    <div class="InnerBG">
    <div id="ContentColumn"> <!-- col1 in tut -->
    <div class="Liner">

<h1>Page Headline</h1>

Page Content, Images Lorem Upsim etc...

</div> <!-- End Content Column -->
</div> <!-- End Liner -->

<div id='NavColumn'>
<div class='Liner'>
<div class='Navigation'>
Site 
Navigation
Links
</div><!-- end Navigation -->        
</div><!-- end Navigation Liner -->
</div><!-- end NavColumn -->

<div id='ExtraColumn'>
<div class='Liner'>
Extra
Column 
Content
</div><!-- END Extra Column Liner-->
</div><!-- END ExtraColumn -->


</div><!-- END colleft -->
</div><!-- END colmid -->
</div><!-- END colmask and threecol -->
<div id='Footer'>
Footer Content, Address etc...
</div>
</div><!-- END PageWrapper -->

</body>
</html>

Here is the CSS code:

#PageWrapper{ 
    margin:1em auto;
    max-width:60em; /*960px / Default Font Size of 16px = em result*/
    border:0.3125em groove #DDDDDD;
    background-image:url(../image-files/background.gif);
    background-repeat:repeat-y;
}

.InnerBG{float:right;/*border:3px solid red;*/width:100%;}

#Header{position:relative;}

#Header .Liner{padding:0;}

#Header a.header-home-link{max-width:60em;display:block;}

#Header img{display:block;}

#ShareThis{width:100%;margin:1em auto 2em;}

#NavColumn, #ContentColumn, #ExtraColumn {float:left;}

#ContentColumn{max-width:62.50%;/*border:2px solid green;*/width:100%;}

#NavColumn{max-width:18.645833333%;text-align:center;font-size:90%;color:#000;width:100%;}

#ExtraColumn{max-width:18.645833333%;text-align:center;font-size:90%;color:#000;width:100%;}

It has been an extensive process trying to figure out the ideal CSS rules to display the columns correctly. If anyone has suggestions on how to resolve the column display issues witnessed here: , I would greatly appreciate the help. Thank you in advance for any assistance provided.

html css css-float

Answer 1

Answer №1

I was able to accomplish most of the tasks you were looking for, with the exception of the "Share This" column which was missing. I placed the first two columns inside the MidBG div and floated it to the left. Then, I floated the first column to the right so that it appeared before the second column, and the third column ended up on the right side.
I also had to remove several instances of width:100%, as they were causing some issues.

To see the changes, check out my jsfiddle.

I hope this aligns with your requirements, as it's based on what you requested...

Answer 2

I was able to accomplish most of the tasks you were looking for, with the exception of the "Share This" column which was missing. I placed the first two columns inside the MidBG div and floated it to the left. Then, I floated the first column to the right so that it appeared before the second column, and the third column ended up on the right side.
I also had to remove several instances of width:100%, as they were causing some issues.

To see the changes, check out my jsfiddle.

I hope this aligns with your requirements, as it's based on what you requested...

Answer 3

Answer №2

Your current code structure is a bit messy and cluttered, with unnecessary elements scattered throughout. It might be best to consider starting fresh for clarity.

To help you kickstart your project, I've created a simple three-column layout that is responsive as per your request.

When developing your website, remember the principles behind this layout to keep things organized and functional.

<body>
<div id="container">
<div class="column1">
</div>
<div class="column2">
</div>
<div class="column3">
</div>
</div<!--end container-->
</body>

CSS

#container{
width:100%;
}

.column1{
background-color:blue;
width:33.33%;
height:200px;
float:left;
}
.column2{
background-color:red;
width:33.33%;
height:200px;
float:left;
position:relative;
}
.column3{
background-color:green;
width:33.33%;
height:200px;
float:right;
position:relative;
}

@media screen and (max-width:320px){
.column1, .column2, .column3{
    float:none;
    position:static;
    margin:0 auto;
    width:100%;
}
}

Feel free to view it in action http://jsfiddle.net/hJ9BS/ Resize the 'Result' window to see its responsiveness 😉

Answer 4

Your current code structure is a bit messy and cluttered, with unnecessary elements scattered throughout. It might be best to consider starting fresh for clarity.

To help you kickstart your project, I've created a simple three-column layout that is responsive as per your request.

When developing your website, remember the principles behind this layout to keep things organized and functional.

<body>
<div id="container">
<div class="column1">
</div>
<div class="column2">
</div>
<div class="column3">
</div>
</div<!--end container-->
</body>

CSS

#container{
width:100%;
}

.column1{
background-color:blue;
width:33.33%;
height:200px;
float:left;
}
.column2{
background-color:red;
width:33.33%;
height:200px;
float:left;
position:relative;
}
.column3{
background-color:green;
width:33.33%;
height:200px;
float:right;
position:relative;
}

@media screen and (max-width:320px){
.column1, .column2, .column3{
    float:none;
    position:static;
    margin:0 auto;
    width:100%;
}
}

Feel free to view it in action http://jsfiddle.net/hJ9BS/ Resize the 'Result' window to see its responsiveness 😉

Answer 5

Answer №3

I'm not sure why there are so many wrappers in your code, but rearranging your containers can help you achieve the desired layout. Start with NavColumn, then ContentColumn, and finally ExtraColumn.

<div id="PageWrapper">
    <div id="Header">
        <div class="Liner">Header Links Etc</div>
    </div>
    <div class="OuterBG threecol">
        <div class="MidBG">
            <div class="InnerBG">                    
                <div id="NavColumn">
                    <div class="Liner">
                        <div class="Navigation">Site Navigation Links</div>
                    </div>
                </div>
                <div id="ContentColumn">
                    <div class="Liner">
                         <h1>Page Headline</h1>Page Content, Images Lorem Upsim etc...</div>
                    </div>
                <div id="ExtraColumn">
                    <div class="Liner">Extra Column Content</div>
                </div>
            </div>
        </div>
    </div>
    <div id="Footer">Footer Content, Address etc...</div>
</div>

http://jsfiddle.net/rWtDa/

Answer 6

I'm not sure why there are so many wrappers in your code, but rearranging your containers can help you achieve the desired layout. Start with NavColumn, then ContentColumn, and finally ExtraColumn.

<div id="PageWrapper">
    <div id="Header">
        <div class="Liner">Header Links Etc</div>
    </div>
    <div class="OuterBG threecol">
        <div class="MidBG">
            <div class="InnerBG">                    
                <div id="NavColumn">
                    <div class="Liner">
                        <div class="Navigation">Site Navigation Links</div>
                    </div>
                </div>
                <div id="ContentColumn">
                    <div class="Liner">
                         <h1>Page Headline</h1>Page Content, Images Lorem Upsim etc...</div>
                    </div>
                <div id="ExtraColumn">
                    <div class="Liner">Extra Column Content</div>
                </div>
            </div>
        </div>
    </div>
    <div id="Footer">Footer Content, Address etc...</div>
</div>

http://jsfiddle.net/rWtDa/

3-Column Layout with Left-Floated Columns Displaying Incorrect Order

Answer №1

Answer №2

Answer №3

Similar questions

Deactivate user input in Knockout Kendo TimePicker

Slider that is always being updated cannot be moved by dragging

Randomize elements with the click of a button

Is it feasible to execute exe files within a ReactJS environment?

Is it not recommended to trigger the 'focusout' event before the anchor element triggers the 'click' event?

Adjusting Text Size Depending on Width

Why does the parent URL become the origin for an AJAX request coming from an iframe?

Stable header that jumps to the top when scrolled

The height of a div element does not automatically default to 100% in Next.js

Challenges with aligning Fontawesome stacks

Side Text for Floating Action Button

Automated static file versioning in Google App Engine/Python

What is the best way to include a div element with a dynamic animation on a webpage?

Implementing image change on dropdown selection using jQuery click event

Dynamically create a button using jQuery and JSON based on specific conditions (either true or false)

Javascript Dilemma: Unable to Access 'object.style.left' and 'object.style.top' Values - What's the Issue?

Using AJAX and jQuery, the result is retrieved and inserted into a <div> element

Tips on handling a nested HTML hyperlink in Selenium using Python with IE11

Is it possible for the binding model of Mat-Checkbox to be optional or null?

Bootstrap columns causing a collision