When one element disappears, the remaining elements expand to fill the empty space

Question

When one element disappears, the remaining elements expand to fill the empty space

I've set up two DIV elements, but I want them to only appear on one specific page. On all other pages, I need only one of those DIV elements to show. When the second element disappears, I want the first element to automatically expand to full width. Unfortunately, I can't upload images right now, so here's an example:

[div element "one"] occupies 50% width [div element "two"] occupies 50% width

*Now div element "two" vanishes

[div element "one"] takes up 100% width

How can I achieve this layout with just CSS and HTML? It seems challenging without changing the DIV element classes.

html css

Answer 1

Answer №1

You can customize the appearance of your div based on the class of its parent container:

Example for Page 1:

<body class="grid">
  <div id="box1">content</div>
  <div id="box2">content</div>
</body>

Example for Page 2:

<body class="list">
  <div id="box1">content</div>
</body>

CSS stylesheet:

.grid #box1 { width: 50%; }
.list #box1 { width: 100%; }
#box2 {width: 50%; }

Answer 2

You can customize the appearance of your div based on the class of its parent container:

Example for Page 1:

<body class="grid">
  <div id="box1">content</div>
  <div id="box2">content</div>
</body>

Example for Page 2:

<body class="list">
  <div id="box1">content</div>
</body>

CSS stylesheet:

.grid #box1 { width: 50%; }
.list #box1 { width: 100%; }
#box2 {width: 50%; }

Answer 3

Answer №2

Try formatting your code like this:

HTML

<div class="two">two</div>
<div class="one">one</div>

CSS

.two{
    background:blue;
    float:left;
    width:50%;
}
.one{
    background:yellow;
    overflow:visible;
}

View the result on http://jsfiddle.net/gJ22P/

OR

You can also apply the display:table property to achieve a similar effect.

See the example at http://jsfiddle.net/gJ22P/1/

This method is compatible with IE8 and newer versions.

Answer 4

Try formatting your code like this:

HTML

<div class="two">two</div>
<div class="one">one</div>

CSS

.two{
    background:blue;
    float:left;
    width:50%;
}
.one{
    background:yellow;
    overflow:visible;
}

View the result on http://jsfiddle.net/gJ22P/

OR

You can also apply the display:table property to achieve a similar effect.

See the example at http://jsfiddle.net/gJ22P/1/

This method is compatible with IE8 and newer versions.

When one element disappears, the remaining elements expand to fill the empty space

Answer №1

Answer №2

Similar questions

Adding a new row to a Bootstrap table while maintaining the consistent style

Unable to locate element within the HTML code in Angular

Other options besides re-flowing and repainting

Tips for overflowing an image within an Ionic toolbar

Graphic descending within container

Angular state correctly maps to the controller but is not reflected in the HTML

Navigating through a diagonal path

Dynamic parallax effect with scroll wheel on WebKit

Rejuvenate a just-launched window.open starting from the about:blank

Issue with ASP.NET C# querying MS Access database

Using a loop to draw lines on a canvas

I'm struggling to figure out why the CSS isn't working properly

Creating a DOM element within a JavaScript function does not result in the generation of HTML code

Guidelines on setting the first weekday to Sunday in Python's Django HTMLCalendar

Unlimited scrolling feature in Ionic using JSON endpoint

What is the best way to relocate an image or link using CSS?

"Jsoup interprets certain characters in a unique way during parsing

Guide on how to select a specific button from a set of buttons in JQuery without using a class name or id

What might be causing the in-viewport javascript to not work in my code?

When a user chooses an item from the drop-down menu, a text input field will automatically surface