What could be the reason for my post container not functioning properly?

I am facing an issue with my HTML and CSS code. The container is not displaying as expected, specifically the green bar that should appear below the image. I suspect that the container's auto attribute is causing it to overlook the content inside. Can anyone offer assistance?

Visit the JSFiddle link for reference.

HTML Code Snippet

<html>
<head>
   <link rel="stylesheet" type="text/css" href="main2.css">
</head>
<body>

   <div id="content">

        <div id="postcontainer">
            <div id="postpicture">
                <img src="" width="80px" height="80px">
            </div>
                <div id="right">
                    <div id="postheader">
                        <div id="postname">
                            Sean Allen
                        </div>
                        <div id="postdate">
                            July 15, 2013
                        </div>
                    <div id="post">sample text.</div>
                    </div>
                </div>
                <br class="clear" />
        </div>


    </div>

</body>
</html>

CSS Code Snippet

html, body {
Padding:0px;
margin:0px;
background:#EDEDED;
}

#content{
width:900px;
height:auto;
min-height:1000px;
background:#FFFFFF;
}

#postcontainer{
width:auto;
height:auto;
background:green;
}

#postpicture{
width:80px;
height:80px;
float:left;
padding:8px;
border:2px solid #FFFFFF; 
outline:1px solid #AAAAAA;
background:yellow;
}

#right{
width:800px;
height:auto;
float:right;
background:blue;
}

#postheader{
width:790px;
height:auto;
background:red;
}

#postname{
width:auto;
height:19px;
padding:5px;
padding-top:10px;
font-weight:600;
float:left;
background:brown;
}

#postdate{
width:auto;
height:19px;
padding:5px;
padding-left:10px;
padding-top:13px;
float:left;
font-size:13px;
background:purple;
}

#post{
width:785px;
height:auto;
padding-left:15px;
float:left;
background:orange;
 }

Answer №1

You need to make sure you clear the #postcontainer element, as it contains floated descendants that are taken out of the normal flow. One solution is to add overflow: hidden; to create a new block formatting context for the floated descendants, allowing height: auto; to function properly. Keep in mind that floated elements do not interact with other block-level elements unless cleared or provided with a new block-formatting context for the parent.

Check out this link for more information and an example.

Answer №2

To achieve the desired layout, apply the CSS property display:inline-block; within the selector #postcontainer.

http://jsfiddle.net/cc48D/

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

Center text within a dropdown using Bootstrap styling

In a row within my inline form, I have both an email input and a dropdown. However, after resizing the page, the text within the dropdown is no longer positioned correctly (text on the left, arrow on the right). I attempted to fix this by using: text-alig ...

Is it possible to download a hefty file using Powershell's Invoke-RestMethod?

To automatically download a file from a specific website, I need to provide some information within a JSON object to the REST web service. To achieve this, I create a hash table, convert it to JSON, and include it in the body of the Invoke-WebRequest. $ha ...

Achieve perfect alignment of an HTML table by positioning it precisely 36 pixels away from the right edge of the window

I'm struggling to achieve a table that is precisely 36px away from both the left and right edges of the browser window, regardless of CSS. While I can easily set the left margin, getting the exact right margin seems impossible as the `margin-right` CS ...

An online submission form for sending information to an email address and receiving a notification email

I've been searching for a solution to my issue extensively, but I still can't seem to make it work. The problem lies in the form functionality on my website - it collects user data and sends it to me via email upon submission. Additionally, I wa ...

Can we stop a specific container from resizing on mobile devices?

My goal is to have the entire page scale down, except for the navigation container. I'm adjusting some CSS rules to improve accessibility on smartphones, but the issue arises with the multiple images it uses. I need these images to display in their or ...

Achieve dynamic styling and adjust window size using window.open

My mind is exhausted after days of trying: function prtDiv( o ) { var css = 'body {font:normal 10px Arial;}' ; var wo = window.open('','print','width=600,height=600,resizable=yes'); wo.document.write( '<he ...

The PHP index is not being identified when accessed through the post method

I am delving into the world of PHP as a beginner and still learning the ropes. I tried to replicate a small script exactly from one language to another, but encountered an issue where the index from my HTML file is not being recognized in PHP. The tutorial ...

Creating a JavaScript function that responds to multiple click events

Can someone please help me out? I have the link to the output of my work below using JavaScript and HTML: My goal is for only one circle to be active when clicked, while the others are disabled. Currently, when I click on a circle and then another one, bo ...

What is the best way to deactivate div elements once an overlay has been applied to them?

My goal is to place an overlay on my form to prevent users from accessing the content. Even though I have added an overlay, users can still interact with input fields. How can I prevent that? .overlay { background: rgba(0, 0, 0, .75); text-align: ce ...

Maintain visibility of the vertical scroll bar while scrolling horizontally

Currently, I am in the process of setting up a table with fixed headers and columns that have a minimum width. To ensure this setup functions correctly, I require both vertical and horizontal scroll bars. The vertical scroll bar should only navigate throu ...

Incorrect implementation of Bootstrap CSS in Jade template

Currently, I am leveraging Express to construct a website. However, there seems to be an issue with my jade template not displaying the bootstrap grid system accurately. Despite double-checking that my app path is correctly set through app.use(express.stat ...

The functionality of classes containing <ul> elements is ineffective

Having recently embarked on the journey of learning html/css, I've encountered some confusion along the way. Allow me to showcase my basic web-page layout: <html> <head> <meta charset="utf-8"> <link rel = "stylesheet" type="text ...

Verifying file types with HTML5 drag and drop feature

Is it possible to change the drop zone's background color to green or red based on whether the dragged payload contains supported file types (JPEG)? Do Gecko and Webkit browsers have the ability to determine the file type of drag and drop files? ...

Center flex items along the vertical axis

IMAGE <div className="d-flex align-items-center"> <img src={member.user_profile_image} width="41" height="41" alt="" ...

Retrieving the input value from embedded cells in a specific row of a table

I need the function to calculate the result of the following expression using values from the table below: a+b*c-(e/f) This calculation should exclude rows with e and f. Although I encountered a similar issue before, there was no solution for this spe ...

Is there a way to retrieve the present value of a dropdown menu once an ajax call is successful?

Currently, I am facing an issue where I am unable to retrieve the selected value from a dropdown menu. The logged value is always the first option in the dropdown menu, even though I have set it to a different value. Can someone help me identify what I may ...

Unable to extract text input from form

When designing a form for users to change their password, I encountered an issue where passing 3 empty Strings instead of a User object resulted in the Strings being returned as empty when submitting the form. Is there a way to retrieve String values from ...

Setting the child elements of a CSS div to have the same width and be larger than the

Welcome everyone to my inaugural post! I hope I've followed the right steps. I'm encountering an issue where I have child divs that need to have equal widths. The #content can sometimes exceed the browser window's width (hence the 3000px), ...

Execute a PHP function using JavaScript/jQuery with AJAX requests

Hello everyone, I am reaching out for assistance with AJAX as I am still quite new to it. Despite the abundance of examples available, I find it challenging to grasp the concept. Specifically, I need help with my validation of a contact form using JavaScri ...

What is the process for including a new column in a table created using the FixedTable jQuery plugin?

I'm a beginner with the jQuery FixedTable extension. How can I insert a new row into a table that already exists? I need guidance on how to accomplish this task. ...