CSS Boxes Misaligned - Need Correcting

Feeling a bit frustrated with CSS at the moment, always getting tripped up by the little things. So here's my issue: I'm working on a design that requires 2 columns - one sidebar of 300px on the right, and the other column should fill the remaining space.

Currently, I have the sidebar appearing below the main content in the left column.

Here is the HTML code:

<div class="wfix"><div class="col-fix">
    <div class="col-lg">
    <!-- 
       <div id="block">
           <bh>Homepage</bh>
        <detail id="test">Loading...</detail>
       </div> 
     -->
    </div>

    <div class="col-side">

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

And here is the corresponding CSS code:

.wfix{ margin-left: 5em; margin-right: 5em; }
.col-fix {
    display: table;
    width: 100%;
    table-layout: fixed;
}
.col-lg, .col-side {
    color: #999;
    margin: 0;
    padding: 0;
}
.col-lg {
    margin-left: 0;
    margin-right: 300px;
    padding-top: 0px;
    display: block;
    vertical-align: top;
    background-color: blue;
    min-height: 500px;
}
.col-side {
    width: 300px;
    float: right;
    padding-top: 0px;
    display: block;
    vertical-align: top;
    background-color: red;
    min-height: 500px;
}

Any help or guidance would be greatly appreciated. Thanks in advance, Jake.

Answer №1

It is recommended to place floating elements at the beginning of the HTML structure:

<div class="wfix">
   <div class="col-fix">
      <div class="col-side"></div>
      <div class="col-lg"></div>
  </div>
</div>

View 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

The text next to images is being clipped (is it CSS?)

Encountering a problem with CSS on my Wordpress websites. Using WP's editor to float images to the right or left of text, I noticed an issue when viewed on mobile: https://i.sstatic.net/gVFRq.jpg The text gets cut off. How can I ensure that no tex ...

The iframe is being loaded in the center of the page rather than at the top

I am currently facing an issue with embedding wetransfer into a website using iframe. The problem is that when the page loads, it automatically scrolls past the header section of the site instead of loading the new page at the top. How can I prevent this ...

What is the best way to get my loading screen div to cover the entirety of my screen, including all content beneath it?

In order to create a loading screen, I am utilizing PHP to dynamically load specific services for my website. I attempted to set the height of my wrapper div to 100% but it did not produce the desired results. After that, I experimented with setting the he ...

Creating Custom GTK Themes using CSS3

Just a quick question: Can CSS3 be used to style GTK3 applications? ...

Instructions on converting text to a Float value and displaying the calculated result in a separate div

I am attempting to extract a string from a div, clear its content, then retrieve the actual price from ".skuBestPrice", remove any special characters, perform calculations to convert it into a floating point number, and display this number in the div ".tot ...

Is there a way to dynamically toggle the visibility of a floating textarea between on and off?

I have my own blog website: Essentially, what I am aiming for is When a user clicks on the search button, a floating semi-transparent textarea window should appear inside the designated rectangle area (as shown in the image, that red orange rectangle). ...

Problem with CSS transition on horizontal scrolling list items

I am currently working on a horizontal list with list items. When I hover over the list, it is supposed to expand horizontally to display more information, although this feature has not yet been implemented. However, I am having trouble understanding why ...

arranging three divs in a row, with one div expanding to fill the entire height while the other two divs evenly split the remaining

I am attempting to create a content row consisting of 4 divs: 1 container div 3 divs within the container: 1 image - taking up the full height 2 text - sharing the height, but each on a separate line. It should resemble the following: I am unsure which ...

Bootstrap's Vertical Margin Concept

Is there a way to include margin or a line similar to the image below? [![Please refer to the accompanying image][1]][1] ...

The functionality of two-way data binding seems to be failing when it comes to interacting with Knock

I am currently working on a piece of code that consists of two main functions. When 'Add more' is clicked, a new value is added to the observable array and a new text box is displayed on the UI. Upon clicking Save, the values in the text boxes ...

Utilizing CSS to position an image at both the top and bottom of a webpage

I have been struggling to find a solution to this particular issue. My goal is to position an image at both the top and bottom of the page using a background property. I understand that by making the positioning relative, the image will be placed at the bo ...

Django auto-fill using the primary key on the page

Is there a way to automatically select the id or (pk) of an employee's page when adding documents to their profile through a form? Any suggestions for a solution would be greatly appreciated! view.py def createDocument(request): forms = documentF ...

Modifying Label text dynamically using jQuery on Click event

My website HTML contains the following code snippet: <script src="js/jquery.flexslider.js"></script> <script src="js/jquery.rings.js"></script> The contents of jquery.rings.js are as follows: $('input[type="image"]') ...

Ways to expand the border horizontally using CSS animation from the middle

Currently, I am experimenting with CSS animation and I have a query regarding creating a vertical line that automatically grows in length when the page is loaded. I am interested in making the vertical line expand from the center in both upward and downwar ...

What is the best way to obtain the value of a radio button using ajax?

Here is the search button in my PHP file. I am unsure of how to connect the radio button to the JavaScript file. <button id="submit">Search</button> This is the starting point in the JavaScript file var xhr = new XMLHttpRequest(); f ...

Utilizing HTML5 and JQuery for Drag and Drop functionality: Moving an image to populate a linked webpage within an iframe upon dropping

Looking to add a drag and drop feature to my project. The left pane will contain tiles that act as images, while the right pane will display iframes. My goal is to drag a tile from the left pane and drop it onto an iframe on the right pane. The twist is th ...

Retrieve the JSON data embedded within the HTML source code and utilize its contents

I stumbled upon a URL like http://example.com. Taking a look at the HTML source, it appears as follows: <html> test test2 {"customer":{"email":null,"is_eu":true"} t </html> My goal is to extract the JSON data from this source and then manipul ...

What is the syntax for creating a link tag with interpolation in Angular 2 / Ionic 2?

As I work on developing an app using Ionic 2/Angular 2, I have encountered a challenge that I am struggling to overcome. Let me provide some context: I am retrieving multiple strings from a webservice, and some of these strings contain links. Here is an e ...

Combining the p class with flexbox for optimal layout design

I have four flexed container boxes and I am looking to add text below them in a row. Does anyone have suggestions on how I can achieve this alignment, as well as tips for optimizing the code? .container { display: flex; flex-direction: row; just ...

Question: When referencing $(this) in a different div, how can you navigate back to the previous div and access its children elements in jQuery?

Here's the code I've been working on: When a user clicks on a link with the class '.like', I want the total number of likes (found in the div.postInfo as '.PostlikeCount') to update and display the new total. $(".like").cl ...