Aligning CSS Divs with Changing Content

Can someone help me with a CSS and DIV tags issue? I have a dynamic webpage and need guidance on creating a container DIV. Depending on the scenario, this container DIV will either hold one DIV with 50% width that needs to be centered or two side-by-side DIVs each taking up 50% width.

I've attempted using float:center and overflow:hidden, which works for a single DIV but not for two as they stack vertically. When I use float:left, the two DIVs display correctly but the single DIV is aligned to the left instead of centered.

If anyone has suggestions on how to achieve this layout effectively, I would greatly appreciate it!

<div style="width:800px; margin: 2px; background-color:blue">
    <div style="width:50%; background-color:orange;">
        Text
    </div>
    <div style="width:50%; background-color:red;">
        Text
    </div>
</div>

Check out this jsFiddle link

htmlcss

Answer №1

When considering a scenario with two divs:

<div style="width:800; margin: 2px; background-color:blue; display: table;">
    <div style="background-color:orange; display: table-cell;">
        Text
    </div>
    <div style="background-color:red; display: table-cell;">
        Text
    </div>
</div>

Now, if we switch to a one-div scenario:

<div style="width:800; margin: 2px; background-color:blue; display: table;">
    <div style="background-color:orange; display: table-cell;">
        Text
    </div>
</div>

In both situations, whether there are 1 or 2 inner divs, they will collectively occupy 100% of the outer div's width. It functions similarly to a <table> element without explicitly using a <table>.

Answer №2

take a look at this interactive demo

HTML code:

<div class="wrapper">
    <div class="divholder"> 
        <div style="background-color:orange;">DIV 1</div>
        <div style="background-color:red;">DIV 2</div> 
    </div>
</div>

CSS code:

.divholder div{
    display:inline-block;
    margin:auto;
    width:49%;
}
.divholder {
    text-align:center;
    margin: 0 auto;
    position:relative;
}
.wrapper{
    width:100%;
    background-color:blue;
}

This solution addresses your specific requirement. When there is only one div, it will be centered, and if there are two divs, they will be evenly divided and aligned to the left. You can view the demonstration here.

Answer №3

Similar to chharvey's response, you can accomplish this elegantly using the CSS property display: table;

In my scenario, the content is horizontally centered and adjusts seamlessly with any number of columns within the div.wrap. The height of each column is set to 100%, but this can be customized as needed.

Check out a demo on jsBin!

HTML

<div class="wrap">
    <div class="column">
    </div>
    <div class="column">
    </div>
</div>

CSS

html,body {
    height: 100%;
}

.wrap { 
    display: table;
    width: 800px; 
    height: 100%;
    margin: 0 auto;
}

.column {
    display: table-cell;
    background: #FF0;
}
.column:first-child {
    background: #F00;
}

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

Incorporating mootools scripts into a gwt application

My issue involves creating an animation on a Composite that should start when data is loading. To test this, I created animations on regular divs using HTML: <div class="LoadDataWidget"> <div id="arrow" class="greenArrow"></div> < ...

javascriptcssgwtmootools

ReactStrap: If the dropdown list is too long, users may have trouble viewing the final values

Currently, I'm facing an issue with a dropdown list that is taking up the entire screen and hiding some items. Here's the code snippet for reference: const statusSearchDropDownValues = ( <Row className="align-items-center"> <Col c ...

cssreactjstwitter-bootstrapbootstrap-4reactstrap

What is the functionality of the keydown event?

Whenever the input text value is not empty, I want my .removetext div to be displayed, but it's not working correctly. When I type something after the second character, my .removetext gets hidden, but it shouldn't be hidden when the input is not ...

javascriptjqueryhtmlcss

Using Flexbox to ensure two elements do not appear next to each other

When viewing on large screens, I want all elements to be on one row. On smaller screens, I want them to be on three rows. Specifically, I don't want to see the button next to the H1 element on the same row. How can flexbox help solve this problem? Tha ...

javascripthtmlcsslayoutflexbox

Using CSS, center a div element both vertically and horizontally, and position the footer at the bottom of the page

I am encountering some unexpected behavior for a task that I thought would be simple. I have two main objectives in mind. Firstly, I want the footer to be displayed at the bottom of the page as an actual footer. Secondly, I need the div with the ".center-d ...

javascripthtmlcss

Achieving opacity solely on the background within a div class can be accomplished by utilizing CSS properties such

Whenever I adjust the opacity of my main-body div class, it results in all elements within also becoming transparent. Ideally, I would like only the gray background to have opacity. See below for the code snippet: <div class="main1"> content </di ...

cssclasshtmlopacity

Organized Styled-components

Considering implementing styled-components in my application and questioning the best organizational approach. Usually, styled-components are associated with a particular component for increased reusability. However, what is the recommended method for us ...

cssreactjsstyled-components

What is the reason that `font-size` does not match the `height`? For example, if the `<span>` on the left is 2rem, on the right I could fit 2 smaller `<span>`s, each with a size of 1rem

How can I achieve a layout like this? Essentially, I have 2 containers in flexbox: The first one with text "33" The second one is a grid container: The first element in the grid is "EUR" The second element in the grid is ".49" Based on this descript ...

htmlcssfont-sizeline-height

The removal of the div element doesn't seem to be functioning properly

I am struggling with adding and removing div elements using jQuery. While adding a div element is working fine, I am facing issues with removing a div element. Here is the implementation: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " ...

jqueryhtml

What is the best approach to increase the height of a div element dynamically

I've encountered an issue with a div tag containing an image that may exceed the screen size. When this happens, I want to increase the height of the div tag and have a footer displayed below it. Currently, my styling for the div tag looks like this: ...

htmlcss

Enhancing quiz results with intricate input forms using JavaScript

I am currently working on an online quiz and the code is functioning properly. However, I would like to display the scores of each user. As a beginner in Javascript, I have been developing this quiz for a friend, and it has been a learning experience for m ...

javascriptphphtml

Unable to locate a specific div element using Selenium in Python, encountering a NoSuchElementException

Hello, I'm new to Python and still learning the ropes. Currently, I am attempting to locate something on a particular website. Here is what I'm looking for: <div class="price">$ 1.67<span class="discount">-19.71%&l ...

pythonhtmlselenium-webdriverfetch

Creating Image Overlays with Hover Effects using CSS and PHP Conditions

Looking for some assistance with a Minecraft server listing page I am working on for a client. I have never done this before and have encountered a roadblock. Take a look at this image (apologies for using Paint, I was in a hurry!) The goal is to have the ...

htmlcss

What is the correct way to write the syntax for wp_register_style function in

I'm attempting to include a cache-buster version in my CSS file. The guides mention: <?php wp_register_style( $handle, $src, $deps, $ver, $media ); ?> However, I've scoured Google and Stack Overflow for the correct formatting of these var ...

phpcsswordpress

Apply a border to the navbar when it hovers over a selected element

export const NavBar = () => { return <div className="navbar">this is navbar</div>; }; const Content = () => { return ( <div className="main"> <div className="background"> some content </div> ...

javascripthtmlcssreactjs

Enhancing user experience by highlighting invalid input fields with a red border using client-side HTML5 validation and Bootstrap 5.2

When reviewing the Bootstrap 5.2 validation documentation, https://getbootstrap.com/docs/5.2/forms/validation/ "It has come to our attention that the client-side custom validation styles and tooltips are not accessible at this time, as they are not ...

htmlcssformsvalidation

Guide on changing image source using a function

I am looking to dynamically set the img src="" attribute using a JavaScript function that changes the image based on a variable and checks its values: Here is the JavaScript code in the file: function myFunctionstatus(){ var ledactual = document.getE ...

javascripthtmlimagebutton

What are the steps to make the chosen title and its content active while deactivating the others?

I am currently developing a website for an educational institution that includes schools with subdivisions such as matric, CBSE, and state board, as well as a college. My goal is to create a user interface where clicking on a specific stream (such as matri ...

jqueryhtmlcsstwitter-bootstrapnav-pills

The CSS outline properties vary between input elements and input elements in focus

I'm encountering an issue with a box and its associated CSS outline style. When the box is focused, it should display a blue outline (which is working fine). However, upon form validation, if there is an error, the .error class is added which should c ...

csshtml

Placing two parent flex containers on top of each other

I'm in a situation where I have two .container elements, both set at a height of 50%. Within these containers are the child divs .element, which belong to their respective parent divs .container. The problem arises when applying media queries with f ...

htmlcss