Aligning responsive textcontent in a row

Report · Dec 09, 2017

I wonder if anyone could help me to solve a problem in Dreamweaver CC? The problem is that I can't align some textcontent with a colored background in the bottom with other content in a row. The sketch illustrates what I mean. I have tried with 100vh but that doesn't work, and I've tried with grid-containers, but though I have a margin on the right side the content flows outside it. What shall I do? I'm not using pixelheight because I want it to flow when resizing browswers.

Any suggestion how to code this right?

Report · Dec 09, 2017

I can think of two methods to do this, css flexbox and css grid layouts.

Looking at your layout grid notes for the code, it looks like you are using, (or wish to use) bootstrap, so I will wait for another forum member to suggest a bootstrap method before proceeding further with my suggestion, as Dreamweaver does not support the requirerments for using flexbox or css grid layouts without making you 'jump through hoop' unnecessarily.

Report · Dec 09, 2017

You would need to manually upgrade to Bootstrap 4 beta because it's not included in DW yet. Bootstrap 4 uses newer Flexbox layouts but Bootstrap 3x does not.

Flexbox allows you to vertically align inline and inline table elements to top, middle, bottom or baseline.

https://v4-alpha.getbootstrap.com/utilities/vertical-align/

It also supports equal height columns

Equal Height Columns Example for Bootstrap

To start using Bootstrap 4 in your projects, replace the Bootstrap 3 scripts with the following hosted on CDNs.

Nancy

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Dec 09, 2017

I was hoping for someone to suggest a none flexbox/grid method

LOL

Report · Dec 09, 2017

pziecina wrote
I was hoping for someone to suggest a none flexbox/grid method
LOL

Switch to InDesign and export to PDF.

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Dec 09, 2017

pziecina wrote
I was hoping for someone to suggest a none flexbox/grid method
LOL

This seems to suggest that there are no other ways to construct the planned layout than CSS Grid, I will not add the single dimensional Flexbox in this context.

Surprise surprise, there are two other non-JavaScript ways to achieve this, namely

HTML Table
CSS Table

The following shows the browser support for CSS Table (2-dimensional)

and this is for CSS Grid (2-dimensional)

and for those that believe that Flexbox (1-dimensional) is the way to go

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

Report · Dec 09, 2017

And you would recommend html tables?

The comment was ment as a joke, but unlike most experts and the W3C you still hold to the fallacy that flexbox can only be used for 1 dimensional layouts.

Please read up on the specs, read what Rachael Andrews has to say, and most other people who use flexbox to create 2 dimensional layouts. It is obvious you like many who cannot use Flexbox are stuck in the past, that is why Dw is dying.

I give up with this forum, Dw and people like yourself Ben.

Report · Dec 09, 2017

And you would recommend html tables?

No

The comment was ment as a joke, but unlike most experts and the W3C you still hold to the fallacy that flexbox can only be used for 1 dimensional layouts.
Please read up on the specs, read what Rachael Andrews has to say, and most other people who use flexbox to create 2 dimensional layouts.

This is what Rachael Andrews says

Flexbox is essentially for laying out items in a single dimension – in a row OR a column. Grid is for layout of items in two dimensions – rows AND columns.

As for

It is obvious you like many who cannot use Flexbox are stuck in the past, that is why Dw is dying.

this is another unsubstantiated statement.

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

Report · Dec 09, 2017

Just to add to my previous answer, in the past half year or so, I have been using CSS Grid for my layout and Flexbox for my fallbacks.

The following shows this fact which is used on BoK | Meet the BunchOKids :

.content {
display: flex;
flex-flow: row wrap;
display: grid;
grid-template-columns: 100%;
grid-template-areas:
"main-area"
"right-sidebar";
>.col-main {
flex: 1 100%;
grid-area: main-area;
}
>.col-right {
flex: 1 100%;
grid-area: right-sidebar;
}
@include media-breakpoint-up(md) {
grid-template-columns: 70% 30%;
grid-template-areas:
"main-area right-sidebar";
>.col-main {
flex: 1 0;
}
>.col-right {
flex: 1 0;
}
}
}

Again, I would love to know where the information, that I do not/cannot use Flexbox, came from.

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

Report · Dec 09, 2017

I was joking when I said InDesign to PDF.

It's true you can make equal height columns with CSS Tables. I have done this in the past but I'd be reluctant to keep using it now.

Equal Height CSS Columns in Bootstrap - https://alt-web.com/

Nancy

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Dec 09, 2017

Alright, but how do I do to upgrade Bootstrap?

Report · Dec 09, 2017

mia@design4u2.se wrote
Alright, but how do I do to upgrade Bootstrap?

Read my Reply #2 again. Replace Bootstrap 3 with Bootstrap 4 scripts.
Also read the Bootstrap 4 documentation below.
http://blog.getbootstrap.com/2017/08/10/bootstrap-4-beta/

Nancy

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Dec 10, 2017

Below is a quick mockup with BS4 and vertically centered cards.

<!doctype html>

<head>

<title>Bootstrap 4: Cards Demo</title>

<style>

html, body {height: 100% }

</style>

</head>

<body>

<a class="navbar-brand" href="#">Brand Name or Logo</a>

</ul>

</div>

</nav>

<h1 class="text-white">Hello World!</h1>

<h2 class="text-warning">Welcome to Bootstrap 4</h2>

<h3 class="text-primary">Vertically Centered Cards </h3>

</div>

<h4 class="card-title">Card title</h4>

<p class="card-text">Some quick example text to build on the card title.</p>

</div>

</div>

</div>

</div>

</div>

<h4 class="card-title">Card title</h4>

<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur quos sequi maiores, quia error numquam repudiandae ipsam ab eveniet voluptas at eum.</p>

</div>

</div>

</div>

<h4 class="card-title">Card title</h4>

<p class="card-text">Some quick example text.</p>

</div>

</div>

</div>

</div>

<hr>

<p class="text-center text-light">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque ab explicabo voluptas libero impedit. Modi vel, dolores placeat id magni ut odit libero repudiandae necessitatibus? Dolorem magni illo necessitatibus error.</p>

</footer>

</div>

</body>

</html>

Nancy

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Dec 10, 2017

Yeah, that's easy to do using any workflow method but as you will see you first image box is much taller than the other 2 images boxes and what happens when or if you require more information in the text panels - the images, if they are inline images will split apart, so in my opinion while you can 'force' a look for presenation purposes, it's unworkable in the real world. Infact that doesnt really address anything, according to the visual the OP posted.

Report · Dec 10, 2017

I know it isn't exactly what the OP ordered. Designing responsively for the web is never the same as designing for print. Compromises come with the territory. This is just one of many possibilities.

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Dec 10, 2017

I used a grid system for the page. It will align the content, but doesn't really act responsive. So I think I have to do that manually for the mediasizes. There is some other stuff going on that I don't really like, like it puts an extra row under the grid. I follower this tutorial and made the boxes in the same style as he does 23:11 in the video https://www.youtube.com/watch?v=jV8B24rSN5o

Report · Dec 10, 2017

The problem with the layout as l see it is the 2 images in column 2 will govern what the equal height columns will be so they along with the image in column 1 will have to be background images otherwise that layout is impossible using any method.

Once the OP accepts that we can debate which method is best to use.

Report · Dec 10, 2017

mia@design4u2.se wrote
What shall I do?

Give up - that layout is in no way achievable for a webpage in any shape or form, using any method unless you are prepared to use backgound images which will grow and reduce according to the amount of text you pile into the 3 text boxes, so your carefully crafted dtp 'square image' box layout approach will fail.

Part of the job of a web-developer is to quickly access a situation and be aware of what will work and what won't work. That is perhaps why you find that nearly all websites look similar in construction because I believe we have arrived at a point where an optimum layout has been discovered, which is now being deployed by millions of web-developers..