The div content is being forced downward

I recently implemented a two column layout on my WordPress site, and to ensure it remains responsive when the browser width is reduced, I utilized this specific solution.

While the solution generally works well, I encountered an issue where the content in the main container is pushed down. If I use float:left on both containers, this issue doesn't occur, but I require a different approach to ensure the right container fills the width.

My attempt to address this involved setting the right container to position:relative and the h3 tag within it to position:absolute. While this did bring the content to the top, it introduced other complications.

What could be causing this problem, and what steps can I take to resolve it?

______________________________
||     ||                   ||
|| SB  ||                   ||
||     ||                   ||
||     ||                   ||
||     || Title             ||
||     || Foo text          ||
||     ||                   ||
||     ||                   ||
------------------------------

html:

<div id="main">
    <div id="sub-menu">
        //content
    </div>
    <div id="post-24" class="post post-add">
        //content
    </div>
</div>

css:

#main {
    padding-left: 5px;
    margin-left: 22px;
    margin-top: 28px;
    padding-right: 30px;
    height: 100%;
}

#sub-menu {
    float: left;
    padding: 20px 30px;
    width: 220px;
    height: 400px;
    margin-right: 30px;
    border-radius: 3px;
}

.post {
    padding: 28px;
    padding-bottom: 5px;
    min-height: 400px;
    margin-left: 320px;
}

Answer №1

Position your primary content to the left and set its width to XX pixels. See if this resolves your issue. Feel free to share the results with us.

UPDATE: Upon closer examination, it appears that your text is not aligning at the bottom, but rather directly following an imaginary line that marks the end of the left content. This is likely causing the issue you are experiencing. Simply floating your main content to the left may correct this display problem.

Answer №2

Consider updating .post with the following code:

.post {
    padding: 28px;
    padding-bottom: 5px;
    min-height: 400px;
    float: left;
    }

Although you may lose the previous width setting, this adjustment will prevent the item from being forced downward. If necessary, you can re-define the width as needed.

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

Tips for highlighting the final word in the headline using an underline

I'm attempting to create a title style similar to what is shown below https://i.sstatic.net/Qao4g.png The issue I'm facing is achieving the underline effect. I tried using title:after but it didn't give me the exact result I'm looking ...

The lack of vertical alignment in the table

Trying to do something really simple here and I'm a bit stuck. Currently working on a forum project, and surprisingly the backend is error-free (thanks to some questionable magic tricks), However, my current task is to display all subcategories using ...

CSS is not being applied to the HTML select element generated by PHP

Issue Update: The problem I'm facing is not related to dynamic generation, but rather the sheer number of items. To see a demo, click here: plunker I have select boxes on my website with a consistent style: dark background with white text. select { ...

Exploring the ins and outs of utilizing pseudo selectors with material-ui

I've been attempting to accomplish a simple task. I wanted to toggle the visibility of my <TreeMenu/> component in material UI v1 using pseudo selectors, but for some reason it's not working. Here is the code: CSS: root: { ba ...

How can I attach :after and :before pseudo-elements to a submit button?

I'm attempting to enhance my submit button with :after/:before elements, but I'm having trouble getting it to work properly. Specifically, I want to add a swipe (Sweep To Right) transition effect on the button from left to right. Similar to - th ...

Having trouble with AJAX within AJAX not functioning properly?

Similar to the Facebook commenting system, I am aiming for comments to be appended to previous ones and displayed all at once. However, currently the comments only show up after the page is reloaded. Please Note: Each post initially loads with just two co ...

What alternative can be used for jquery isotope when JavaScript is not enabled?

Is there a backup plan for jQuery isotope if JavaScript isn't working? For instance, if I'm using the fitColumns feature, is there an alternative layout style available in case JavaScript is disabled, similar to what is seen on the new Myspace? ...

Ensuring that two columns in Bootstrap 3 have equal heights while including padding

I would like to achieve this design without using JavaScript. Here is a screenshot for reference: This is what I have created so far using Bootstrap 3. The CSS is inline due to the use of less, which makes it easier :) HTML <section class="container ...

Is it possible to dynamically refresh a Void and PlaceHolder without requiring a full page reload?

Is there a way to automatically update a Void/PlaceHolder using SQL queries without refreshing the entire ASP page? I attempted to use an ASP timer without success. SOLUTION: After experimenting with asp:updatapanel, I discovered a solution that worked ...

Creating a dropdown navigation menu using jQuery

I have been experimenting with creating a customized Drop Down menu using ul li and Jquery, following this helpful Tutorial. Here is the sample HTML Code for testing: <div id="dd" class="wrapper-dropdown-3" tabindex="1"> <span>OS</span> ...

The dropdown menu adjusts its value based on the selected radio button

When I select the "12 hour" radio button, the drop-down values change to 1 am - 12 am and 1 pm - 12 pm. If I select 24 hours, then the values change to 1-24. Below is my code: <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script> ...

Obtain the accurate sequence of tr elements in the form of a jQuery object

Even though you can define tfoot before tbody in the source code, when displayed in the browser tfoot will still appear last: <table> <thead><tr><th>i get displayed first</th></tr></thead> <tfoot><t ...

When I include a class in a checkbox label, the CSS ceases to function properly

Apologies for my lack of understanding, but I am facing an issue with applying an attribute to a label element with class "c". It seems to work fine with other objects, like buttons, but not with labels. I cannot figure out why such a simple thing is not w ...

Applying Regular Expressions in Java to "convert" a CSS style into an HTML tag style

In my Java code, I have a String variable that contains HTML code like this: <span style="text-decoration: underline;">test</span> My goal is to convert it to look like this: <u>test</u> If the HTML code is like this: <span ...

Form for contacting with file attachment option

I'm having trouble integrating file upload functionality into my existing code. I've been scouring the internet for solutions but haven't found anything that fits seamlessly with my current setup. It's frustrating to encounter error aft ...

Move the button to the following line and center it. Ensure that the background image remains at full size

.home{ background-image:url("https://cdn.pixabay.com/photo/2016/12/27/21/03/lone-tree-1934897_960_720.jpg"); background-repeat: no-repeat; height: 100vh; display: flex; align-items: center; justify-content: center; } .hero-text{ fon ...

Tips for incorporating user-entered data from a text box into a JavaScript function and utilizing a loop

Although my code is functioning correctly, I am looking to make some adjustments but seem to be struggling to achieve the desired outcome. Essentially, I have two labels and an input field in which the user is prompted to enter a specific number of weeks ...

What is the best way to enlarge a Material UI card?

Currently, I am utilizing Material UI version 4 on my website and integrating cards (for more details, click here). https://i.stack.imgur.com/dm2M2.png I am interested in enlarging the overall size of the card so that the image appears larger. As I am si ...

The footer covers the content when the content fills the entire screen

I'm having trouble getting my .content_pro to stick to the top of the footer, regardless of screen resolution. When I set the height to 100%, it ends up underneath the footer. I've been struggling with this for hours but can't seem to make i ...

My toggleclass function seems to be malfunctioning

I am encountering a strange issue with my jQuery script. It seems to work initially when I toggle between classes, but then requires an extra click every time I want to repeat the process. The classes switch as expected at first, but subsequent toggles req ...