Inspiring

Question

Equal height columns in any screen size and widths for divs (cellphone)

Forum|Forum|5 years ago
October 18, 2020
4 replies
1967 views

Hello
I have a test page. 1 container, 1 banner div and below are 2 divs side by side.
http://www.davidshelpsite.com

#container: 960px
#banner that holds the 2 images for the banner
#left_colunm: 65%
#right_colunm: 30%

When viewed in a cell phone how to have the 2nd div go below the 1st one and have both go across the screen with equal widths? Plus how to have equal height columns?

Below is not working for me. I have removed them from the source as I cannot get it to work. Example below is what I came across at W3 Schools.

How To - Equal Height
http://w3schools-fa.ir/howto/howto_css_equal_height.html

David

This topic has been closed for replies.

BenPleysier

Community Expert

I know that you have stated that you do not want to use Bootstrap. Maybe I can convince you otherwise.

The Bootstrap framework is desgned to help us to concentrate on high level functionality. This is because any low-level functionality is taken care of by Bootstrap. This allows developers like Nancy and myself, to produce quality websites in a fraction of the time. Copy and paste the following code into a new Dreamweaver document and test in a browser.

<!doctype html>

<html>

<head>

<title>Untitled Document</title>

</head>

<body>

<h1>Busted Computer</h1>

</div>

</header>

<main>

<p>Top div is 960px wide.<br>This is the left column sized at 65% width.</p>

<p>Random text lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam urna odio, ultrices ut suscipit vitae, lobortis non nisi. Random text lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam urna odio, ultrices

ut suscipit vitae, lobortis non nisi.</p>

<p>How to create equal height columns and widths as the screen size changes?</p>

<p>Below is not working for me. I have removed them from the source as I cannot get it to work. Example below is what I came across at W3 Schools.</p>

<p>How To - Equal Height<br>http://w3schools-fa.ir/howto/howto_css_equal_height.html</p>

</div>

<p>This is the right column sized at 30% width.Random text lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

</div>

</main>

</body>

</html>

The result:

Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!

davidhelpAuthor

Inspiring

To Ben: I am low level and barely functional : )

Thanks to all for your help. It looks to be working now : )
I used Osgood suggestions.

I sse equal height columns in a pc screen. In cell phone, the right column drops below left and is not equal sized in height, just to the last line of text, but that is fine.
http://www.davidshelpsite.com

Question on flex-basis:
I use Dreamweaver CS6 and do not see the properties of it.
I see a 2nd instance of #left_column{ and #right_column{ but no

properties. Is it because CS6 is old and does not know about Flex-

basis?

The reason I have 2 seperate images in the banner (top) is the single

image is too big by itself and will shrink too much so I have 2 images

so the 2nd one will fall below the first as the screen size shrinks and they will for most part be

equal size. The 2nd image (Computer) does shrink more then the

Busted image does. This is only apparent in a cellphone screen held

vertical. It looks fine horizontal. I write these pages and store them away as I will not remember all the various how to's and everyone seems to have a different take on writing the code for a webpage when you come across how' to's on the internet.

Nancy OShea

Community Expert

CS6 is 8-9 years outdated. It doesn't support modern Flexbox or Grids. Use CS6 as your code editor. Use your browsers to test results. DO NOT rely on Design View.

Nancy O'Shea— Product User & Community Expert

Nancy OShea

Community Expert

Os, put your readers on.

#container {width: 960px} is going to look like a postage stamp on 4 and 5k displays. Also why 2 banner images? What's that about?

Give me a Bootstrap developer any day. At least I don't have to guess what thought process went into the project. Bootstrap is a logical, common sense approach to building responsively. Anybody who says otherwise is missing the bigger picture.

Nancy O'Shea— Product User & Community Expert

O

osgood_

Legend

Os, put your readers on.

#container {width: 960px} is going to look like a postage stamp on 4 and 5k displays. Also why 2 banner images? What's that about?

That's a typo error in the forum by the OP. If you actually take a few seconds to look at the linked stylesheet at the url posted by the OP you'll see its - max-width: 960px; (I do my homework, not just jump in with a Bootstrap solution).

Actually the banner image being in 2 slices works as you are able to re-position one image beneath the other on smaller screen widths. If it was one large image then the image would become too small on smaller screens. So whether by judgement or mistake its a solution which works better than one large image.

Everyone knows Bootstrap is bloated, uses meaningless markup/css classes, myriads of inline css garbage, which makes management troublesome. The majority of Bootstrap developers admit that and hate it but its a case of using something horrible to get the work done faster (which I dont believe is necessarily so, especially if you are a good coder). The Bootstrap themes are even more bloated and waste mobile bandwidth. You will certainly have to re-write a ton of Bootstrap css to make a Bootstrap built website look how you want it to look, which to me defeats the objective of using the default css styling of a framework. Writing a responsive grid these days is about the most simplest of exercises you can do. If you want to take advantage of the js modules in Bootstrap then you'll never move on from those, there's a whole new world out there with exciting solutions beyond what Bootstrap can offer as default, you either want to take advantage of that or you just keep on recycling the same dreary constructions and using the same tired components.

O

osgood_

Legend

It's good to see you are NOT using Bootstrap, a horrible and bloated solution indeed and simply no need for simple websites or complex ones, come to that. Bootstrap is around 2 years out of date, even taking into consideration v5 which has recently been released, without support for css grid, shocking!!

Your requirement is a simple 2 minute fix.

Wrap your #left_column and #right_column <divs> in a <section></section> tag with a class of 'main' as below:

</div>

</div>

</section>

Then add the main css selector to your css styles:

.main {
display: flex;
flex-wrap: wrap;
}

Next amend your #left_column and #right_column css to as below:

#left_column{
flex-basis: 65%;
background-color: #fefbe6;
padding: 10px;
}

#right_column{
flex-basis: 35%;
background-color: #fab475;
padding: 10px;
}

Then add css media queries directly AFTER the #left_column and #right_column css to re-arrange the divs for mobile devices:

@217338 screen and (max-width: 768px) {
#left_column{
flex-basis: 100%;
}
}

@217338 screen and (max-width: 768px) {
#right_column{
flex-basis: 100%;
}
}

Lastly add the below at the very start of your css stylesheet (This zeros out the padding/margin on all the elements, which is good practice)

* {
box-sizing: border-box;
}

You should also consider making your banner image responsive by adding the below css selector:

#banner img {
max-width: 100%;
height: auto;
}

Nancy OShea

Community Expert

It's looks like you're petitioning for sainthood. I'll put in a good word with the archdiocese 🙂

Meanwhile, this isn't going to work with OPs current CSS which as you probably know contains fixed widths and floats. I recommend getting rid of the old stylesheet.

Nancy O'Shea— Product User & Community Expert

O

osgood_

Legend

Meanwhile, this isn't going to work with OPs current CSS which as you probably know contains fixed widths and floats. I recommend getting rid of the old stylesheet.

Shows how much Bootstrap has warped your ability to read code....... there are no fixed widths in the OPs current code, apart from 1 image, which is unrelated. The code which exists is perfectly fixable and I've remove the floats and replaced them with a flex solution. The floats which remain are the perfect solution to float the images, which is what float was intended to do, not put <divs> side by side.

Just telling the truth.....I know Bootstrappers don't want to hear that, so its a totally expected response.

Nancy OShea

Community Expert

I'm using Bootstrap's mobile-first framework for this example.

Equal Height/Width Cards:

1 col wide on mobile, 2 cols wide on tablet, 4 cols wide on desktop.

Copy & paste code below into a new, blank document. Test in real browsers and devices.

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 4.5 Equal Height/Width Cards </title>
<!--latest Bootstrap on CDN-->
<link rel="stylesheet" href="
https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
</head>

<body>
<div class="container bg-dark">
<p class="text-light">Navigation goes here...</p>

<div class="row row-cols-1 row-cols-sm-2 row-cols-lg-4 bg-info pt-3">

<!--1st column-->
<div class="col mb-4">
<div class="card h-100"> <img src="https://dummyimage.com/125x125" class="card-img-top rounded-circle" alt="placeholder image">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
</div>

<!--2nd column-->
<div class="col mb-4">
<div class="card h-100"> <img src="https://dummyimage.com/125x125" class="card-img-top rounded-circle" alt="placeholder image">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content.</p>
</div>
</div>
</div>

<!--3rd column-->
<div class="col mb-4">
<div class="card h-100"> <img src="https://dummyimage.com/125x125" class="card-img-top rounded-circle" alt="placeholder image">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is less text.</p>
</div>
</div>
</div>

<!--4th column-->
<div class="col mb-4">
<div class="card h-100"> <img src="https://dummyimage.com/125x125" class="card-img-top rounded-circle" alt="placeholder image">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
</div>
</div>
<p class="text-light">Footer goes here...</p>
<!--/.container--></div>

<!--First jQuery then Popper then Bootstrap--> 
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script> 
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
</body>
</html>

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded