Parent div contains three child divs without automatically resizing

I'm new to web design and I'm curious about how to achieve a layout like this:

<div id="container_m">
    <div id="left">
        <p>My name is Barnabas</p>
    </div>
    <div id="right">
        <p>For sale</p>
    </div>
    <div id="center">
        <p>Latest news</p>
    </div>
</div>

My current CSS code:

#container_m
{
    position:absolute;
    height: 40%;
    width: 60%;
    left: 20%;
    top: 45%;
    background-color:rgba(0,0,0,0.2);

}

#left
{
    position: relative;
    height: 100%;
    width: 33%;
    float: left;
    background-color: blue;


}
#right
{
    position: relative;
    height: 100%;
    width: 33%;
    float: right;
    background-color: green;
}

#center
{
    position: relative;  
    height: 100%;
    width: 33%;
    margin:0 auto;
    background-color: yellow;           
}

Answer №1

When working with floating divs, it's important to prevent them from affecting the auto-resize of the parent div. To ensure the proper auto-resize of the parent div, I typically include the following snippet just behind the last floating child:

<div style="clear: both;"></div>

While this may seem like a makeshift solution, it effectively guarantees that the parent div will resize correctly alongside its children.

Answer №2

Is there an issue with that? While adjusting the size of my browser, I noticed that the elements are fluctuating in size. If you're referring to the fact that they're not all in a straight line, try the following:

<div id="wrapper">
    <div id="left">
        Left Content
    </div>
    <div id="center">
        Center Content
    </div>
    <div id="right">
        Right Content
    </div>
</div>

Afterwards, float them all to the left side. :)

Answer №3

If you want to simplify things significantly, check out this link: http://www.jsfiddle.net/fsnuh/

HTML:

You don't need IDs on every child element, especially if they have the same styling on your website. Classes below are added just for the colored backgrounds:

<div id="container_m">
    <div class="red">
        <p>My name is Barnabas</p>
    </div>

    <div class="yellow">
        <p>Till salu</p>
    </div>

    <div class="green">
        <p>Senaste nytt</p>
    </div>
</div>​

CSS

I've combined the styles for left, right, and center into one for simplicity. Also, I've eliminated the excessive use of position: relative.

#container_m
{
    position: absolute;
    height: 40%;
    width: 60%;
    left: 20%;
    top: 45%;
    background-color:rgba(0,0,0,0.2);
}

#container_m div
{
    height: 100%;
    width: 33.33%;
    float: left;
}

.red
{
    background-color: red;
}

.green
{
    background-color: green;
}

.yellow
{
    background-color: yellow;
}​

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

How to perfectly align columns using Bootstrap

Looking to create two fixed columns in Bootstrap. The current layout can be seen in the image below: https://i.sstatic.net/w41sD.png I want the left and right column to align at the top regardless of the number of items in each column. Refer to the image ...

I'm encountering a "confirm" error within the data table. Any suggestions on how to resolve this issue?

When I try to use two datatables columns in confirm, an error occurs when the text 'do you want cancel?' is displayed. The issue seems to be with the text itself and not the code. How should we go about fixing this problem? This is my current cod ...

Reorganize elements using CSS styling

I have a trio of child divs with the classes span2, span7, and span3. When my browser width drops below 763px, I want them to display in the order span2, span3, and span7. How can I achieve this using CSS? Here is the code snippet I started with: <div ...

The art of organizing information: Tables and data management

Looking for a solution with a table: <table> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> </tr> </table> Trying to format the cells to display as: 1 2 3 4 ...

Struggling to create a CSS dropdown menu where the dropdown items refuse to align to the left

I am currently working on creating a dropdown menu to reveal hidden elements on mobile devices such as smartphones. However, I am facing an issue where the child elements of the dropdown menu are appearing to the right of the parent element instead of the ...

Issue with page not updating after local storage change and returning to previous page

I have encountered an issue where in Firefox and Safari, the value retrieved from localstorage on the first page is not updated until I manually refresh the page after setting the localstorage value on the second page. Disabling the cache did not resolve t ...

Encountering issues with displaying the JSON response in the table, receiving an undefined error

When I display the JSON response in a table, I am encountering an issue where it shows undefined. The data received can be either one record or multiple records from the database. Interestingly, the correct output is displayed in the alert box. The Control ...

What is the best method for embedding Microdata or JSON-LD for an ebook in SVG image format within an HTML5 document?

Recently, I came across Schema.org and am interested in implementing it on my webpages. However, due to time constraints, I haven't been able to delve deep into understanding it fully yet. The issue at hand involves converting a 670-page PDF book wit ...

Can you tell me the Bootstrap 4 equivalent class for '.well'?

While using bootstrap-3, the .well class can be utilized to create a rounded border around an element with a gray background color and padding. <div class="well">Basic Well</div> However, it seems that there is no .well class available in boo ...

Creating a CSS layout with three columns where the first column's width is unspecified and the second

I am looking to create a three column layout with specific width requirements. The first column should adjust based on content, the second column should fill the space between the first and third columns, and the third column should have a fixed width. Add ...

I am looking to organize my content by creating categories such as How, When, and Why for different videos. How can I achieve this for a large amount of text

I am in the process of organizing categories for the text I have. My goal is to display text from specific categories based on the color that a random video lands on. For example, if the video lands on the color red, I want text from the category labeled " ...

Troubleshooting Date Problems in Angular

When using the HTML5 date picker, I have encountered an issue where after choosing a date, the ng-model displays an older date instead of the current one selected. <input type="date" ng-model="dateModel" /> For example, when selecting the current d ...

Issue with Bootstrap small column vertical alignment not functioning as expected

I am working on a bootstrap layout with two columns. One column contains multiple elements and text, making it quite long, while the other column only has an image. I am trying to center this image vertically within the left column of content. Here is the ...

Unable to apply .png image using the content property in a Symfony project

I have a png image located in src/AppBundle/Resources/public/img To set the png image using the css content property, I used this code: content: url(../../public/assets/img/optional-checked.png); However, I encountered an error: GET http://127.0.0.1:80 ...

Ensuring that the second level unordered list is set to a height of 100% of the first unordered list, rather than the

I'm working with this menu http://codepen.io/alexandernst/pen/oxpGYQ (I wanted to include it here but the result viewer on SO is causing some display issues...) and I am trying to ensure that the second and third level ul elements are the same height ...

Tips for styling React Material-UI list items with fontAwesome icons and Tailwind.css

I would like to align the text of my list items to the left. Additionally, I want all the icons to be the same size as the envelope icon used in Gmail list item. Currently, my code looks like this: https://i.stack.imgur.com/9LNOs.png How can I achieve th ...

The rotation feature for legends in Highcharts does not function properly on Internet Explorer 10 and 11 if the document mode is

When using Internet Explorer 10 or 11, rotation works perfectly fine if we select edge mode, as shown in the image. This information was taken from the High Chart Demo Charts. However, if we select Document mode 8 in IE 10 or IE 11, the rotation does not ...

Challenges with fading images using jQuery

I am currently working on animating a 5 image slideshow by creating a fading effect between the images rather than just switching abruptly. Here is my HTML structure: <div id="slides"> <ul class="pics"> <li><img src="imag ...

Retrieve information from the identical registration form in Codeigniter

https://i.stack.imgur.com/FWTIf.png The student registration form includes fields for father and mother information in the student table, while guardian information is stored in a separate guardians table. When selecting "Father" in the "Guardian Informat ...

Creating a Mondrian-inspired design using a combination of red, blue, and yellow within an HTML table

Is there anyone who can assist me in recreating this painting using HTML <table> tag and CSS within a browser? The image to replicate: https://i.stack.imgur.com/84y4I.jpg I attempted to complete this task, but my instructor is dissatisfied with th ...