Participating Frequently

Question

what is wrong with this code?

Forum|Forum|7 years ago
November 30, 2018
7 replies
5985 views

The right-col is slightly misplaced:

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

* {

box-sizing: border-box;

}

body {

margin: 0 auto;

width: 100%;

background: lightgray;

border-collapse: collapse;

}

div,

header,

footer {

padding: 10px;

border: 2px #0000ff solid;

}

#left_col,

#page_content {

margin-right: 10px;

margin-top: 10px;

margin-bottom: 10px;

margin-left: 0;

}

#right-col {

margin-top: 10px;

margin-bottom: 10px;

}

header,

footer {

text-align: center;

min-height: 50px;

}

#left_col {

float: left;

width: calc(15% - 10px);

}

#right_col {

float: left;

width: 15%;

}

#page_content {

width: calc(70% - 10px);

float: left;

}

#container,

#scripts,

#wrapper {

border: 0;

}

#left_col,

#right_col,

#page_content {

min-height: 500px;

}

footer {

clear: left;

}

</style>

</head>

<body>

<h1>Header</h1>

</header>

<div id="left_col">Left Column</div>

<div id="page_content">Page Content</div>

<div id="right_col">Right Column</div>

</div>

<footer>Footer</footer>

</div>

<div id="scripts">Scripts</div>

</body>

</html>

This topic has been closed for replies.

B i r n o u

Legend

and the multiple management of skills is not only a matter of a contemporary period, already at the time of the troubadours, these were already endowed with a certain dexterity to handle plural complexity as this old engraving shows it

pziecina

Legend

We are not talking about multiple skill to survive, even a court jester sang, juggled, told stories and generally entertained.

The question was however related to web development, and someones suitability who had multiple part-time jobs, so to repeat the question -

Would you hire someone doing web development as just one of a multiple part-time jobs, and do so for working on anything more than small, (cheap, one-off) site builds?

B i r n o u

Legend

well, when I see your answers, I no longer know if I should continue in the second degree, and continue in the humorous tone, or if I should come back down to earth with serious subjects,... well I can remain in self-mockery while keeping a Cartesian and realistic mind.

I have often worked on projects with people who had real skills and quite serious in their time of realization and who nevertheless only carried out this activity part time... and this for multiple reasons... choice of life, reason of balance, artistic wish etc... in short the reasons and the context are not lacking.

the main and essential point I look for for each project when setting up the team is motivation, competence, the desire to surpass oneself, not counting the hours when necessary, and this regardless of the mode of work for which the person is chosen.

ALsp

Legend

I hope you've solved your issue. In the midst of the maelstrom of posts, please pay heed to Clear Fix method I outlined and the elements on which you should be using padding and margins. The solution is quite easy. If you need more assistance, you might want to start a new topic. I'm sure everyone will understand.

Preran

Community Manager

HS03KFU01 : Did any of the responses above help you solve your challenge? If so, can you mark the answer as correct for the benefit of other users?

Thanks,

Preran

ALsp

Legend

Preran wrote
HS03KFU01 : Did any of the responses above help you solve your challenge? If so, can you mark the answer as correct for the benefit of other users?
Thanks,
Preran

I think there are a few correct answers that fall into the category of teaching someone to fish or handing them a fully-cooked swordfish steak. And there are a couple of clearly wrong answers (or bad copy and paste jobs). Add this all up and I'd reckon the original poster may be a little confused. But this seems to be par for the course on this forum. There is a clear, reasoned approach to teaching most times, but sometimes you need to first determine the level of learning the student needs.

pziecina

Legend

ALsp wrote
There is a clear, reasoned approach to teaching most times, but sometimes you need to first determine the level of learning the student needs.

Should not any poster in this forum already know html and css?

I don't see it as anyones job to actually teach users in this forum, but as the users responsibility to learn for themselves. Asking questions is one thing, especially when one cannot 'see' the problem or the code error and supplying complete examples is also part of the process.

Maybe that's part of the problem now, with Dw users expecting Dw to do everything for them, (generalised comment, not directed at the OP).

pziecina

Legend

And this is a flexbox layout from 2011, with support for older browsers that is not strictly required anymore.

<!doctype html>

<html>

<head>

<title>dw_flexbox_starter</title>

body {

font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;

background-color: #42413C;

margin: 0;

padding: 0;

color: #000;

}

ul, ol, dl {

padding: 0;

margin: 0;

}

h1 {

text-align: center;

}

h1, h2, h3, h4, h5, h6, p {

margin-top: 0;

padding-right: 15px;

padding-left: 15px;

}

a img {

border: none;

}

a:link {

color: #42413C;

text-decoration: underline;

}

a:visited {

color: #6E6C64;

text-decoration: underline;

}

a:hover, a:active, a:focus {

text-decoration: none;

}

/* The actual page css */

/*The @media is for Safari, Android and iOS display, it is placed before the main css so that the cascade works correctly Also if it is placed after the main css, Chrome also inherits the css and does not use the new syntax, and most importantly, not the flex-wrap. */

@media

(-webkit-min-device-pixel-ratio: 0){

.container {

width: 100%;

}

header {

display: -webkit-inline-box;

}

/* a div with id name=contentWrap must enclose the

.sidebar, .content, #rtSidebar, aside html elements, in order enable flexbox 'again' */

#contentWrap {

display: -webkit-box;

-webkit-box-orient: horizontal;

-webkit-box-lines: multiple;

width: 100%;

}

.sidebar, .content, #rtSidebar, aside {

width: 190px;

-webkit-box-flex: 0.0;

}

.content {

min-width: 450px;

-webkit-box-flex: 2.0;

}

footer {

display: -webkit-inline-box;

}

/*The #contentWrap is only required because of none flex wrap supporting browsers*/

.container, #contentWrap {

background-color: #FFFFFF;

display: -ms-flexbox;

-ms-flex-direction: row;

-ms-flex-wrap: wrap;

display: -webkit-flex;

-webkit-flex-flow: row wrap;

display: flex;

flex-flow: row wrap;

}

header {

background-color: #ADB96E;

display: -ms-inline-flexbox;

display: -webkit-inline-flex;

display: inline-flex;

width: 100%;

}

.sidebar, .content, #rtSidebar, aside {

-ms-flex: 3 1 300px;

-webkit-flex: 3 1 300px;

flex: 3 1 300px;

}

.sidebar1, #rtSidebar {

-ms-flex-preferred-size: 180px;

-webkit-flex-basis: 180px;

flex-basis: 180px;

background-color: #EADCAE;

padding-bottom: 10px;

}

.content {

padding: 10px 0;

-ms-flex-preferred-size: 62vw;

-webkit-flex-basis: 50%;

flex-basis: 50%;

}

#rtSidebar {

background-color: #EADCAE;

padding: 10px 0;

-ms-flex-preferred-size: 180px;

-webkit-flex-basis: 180px;

flex-basis: 180px;

}

.content ul, .content ol {

padding: 0 15px 15px 40px;

}

nav ul{

list-style: none;

border-top: 1px solid #666;

margin-bottom: 15px;

width: 180px;

}

nav li {

border-bottom: 1px solid #666;

width: 180px;

}

nav a, nav a:visited {

width: auto;

text-decoration: none;

background-color: #C6D580;

}

nav a:hover, nav a:active, nav a:focus {

background-color: #ADB96E;

color: #FFF;

}

footer {

padding: 10px 0;

background-color: #CCC49F;

display: -ms-inline-flexbox;

display: -webkit-inline-flex;

display: inline-flex;

width: 100%;

}

/* Fallback for FF none support of flex wrap */

@supports not (flex-wrap: wrap) /*and not (-webkit-flex-wrap: wrap)*/ {

.container {

display: block;

width: 100%;

}

/* a div with id name=contentWrap must enclose the

.sidebar, .content, #rtSidebar, aside html elements, in order to enable flexbox 'again' */

#contentWrap {

display: flex;

flex-direction: row;

flex-basis: 100%;

}

header, footer {

display: inline-flex;

}

@media screen and (max-width:700px){

/* Notice how this rule is not applied until after the flex-flow */

.container {

min-width: 500px;;

}

header {

display: -ms-flex;

-ms-flex-direction: column;

}

header, #contentWrap, footer {

display: -webkit-box;

-webkit-box-orient: vertical;

-webkit-box-lines: multiple;

display: -webkit-flex;

-webkit-flex-direction: column;

display: flex;

flex-direction: column;

flex-flow: column;

width: 100%;

height: auto;

}

.sidebar, .content, #rtSidebar, aside {

width: 100%;

}

nav ul{

width: 100%;

}

nav li {

width: 100%;

text-align: center;

}

</style>

<!--[if lte IE 9]>

.container {

width: 960px;

margin: 0 auto;

}

#contentWrap {

margin-top: -22px;

}

.sidebar1 {

float: left;

width: 180px;

background-color: #EADCAE;

padding-bottom: 10px;

}

.content {

width: 600px;

float: left;

}

aside {

float: left;

width: 180px;

background-color: #EADCAE;

padding: 10px 0;

}

nav a, nav a:visited {

padding: 5px 5px 5px 15px;

display: block;

width: 160px;

text-decoration: none;

background-color: #C6D580;

}

/* ~~ The footer ~~ */

footer {

padding: 10px 0;

background-color: #CCC49F;

position: relative;

clear: both;

}

/* ~~ Miscellaneous float/clear classes ~~ */

.fltrt {

float: right;

margin-left: 8px;

}

.fltlft {

float: left;

margin-right: 8px;

}

.clearfloat {

clear:both;

height:0;

font-size: 1px;

line-height: 0px;

}

header img {

display:block;

}

</style>

<![endif]--></head>

<body>

<h1>Dreamweaver Flexbox Demo</h1>

</header>

<nav>

<ul>

<li><a href="#">Link three</a></li>

</ul>

</nav>

<aside>

<p> The above links demonstrate a basic navigational structure using an unordered list styled with CSS. Use this as a starting point and modify the properties to produce your own unique look. If you require flyout menus, ensure you choose one that works correctly with a flexbox layout.</p>

<p>If you would like the navigation along the top, simply change the ul to 'display: inline-flex;' or include it in your 'header' section. Then create the menu styling.</p>

</aside>

</div>

<h1>Instructions</h1>

<h2>How to use this document</h2>

<p>Be aware that the CSS for this layouts is a flexbox layout. Flexbox is a W3C specification that is specificaly for layouts. It does not rely on hacks such as, floats and positioning, this means that the requirement to use a 'float clear' is also not required for the layout. It also reflows the layout to fit the available viewport size, cutting down considerably on the css code required to create a responsive layout. Flexbox also has the added advantage that your html and css code is much cleaner and easier to read.</p>

</section>

<h2>Styling your content</h2>

<p>You can style your content as you would for any other layout. If you are creating a blog, an album or even an e-commerce page you can also have that content re-flow automatically using flexbox.</p>

</section>

<h2>Logo and other styles replacement</h2>

<p>An image placeholder was used in this layout in the header where you'll likely want to place a logo. It is recommended that you remove the placeholder and replace it with your own linked logo. </p>

<p>Use the Property inspector to navigate to your logo image using the SRC field (instead of removing and replacing the placeholder in code view)</p>

<p>To see what css properties are applied to any element, simply select 'live view - inspect' then hover over the item in your layout and CSS Designer will list all the properties that are set.</p>

</section>

</article>

<h4>Backgrounds</h4>

<p>In traditional css layouts, the background color on any block element will only show for the length of the content. Using flexbox this problem does not exist. The background color fills the entire sidebar.</p>

</aside>

</div>

<p>This footer will also automatically reflow.</p>

Address Content

</address>

</footer>

</div>

</body>

</html>

ALsp

Legend

Anyone else?

BenPleysier

Community Expert

ALsp, here is your punishment:

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Untitled Document</title>
    <style>
      nav, footer {
        background-color: black;
        color: white;
        height: 50px; /* not used in production */
      }
      main {
        display: flex;
        height: 300px; /* not used in production */
      }
      section.main {
        width: 50%;
        background-color: lightgray;
      }
      aside.left, aside.right {
        width: 25%;
        background-color: gray;
      }
    </style>
</head>
<body>
    <nav>
      <p>Navbar</p>
    </nav>
    <main>
      <aside class="left">
        <p>Enter your content here</p>
      </aside>
      <section class="main">
        <div class="contentArea"><p>Enter your main content here</p></div>
      </section>
      <aside class="right">
        <p>Enter your content here</p>
      </aside>
    </main>
    <footer>
      <p>Footer</p>
    </footer>
</body>
</html>

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

Nancy OShea

Community Expert

Try this:

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Flexbox Columns</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.flexbox-container {
display: flex;
flex-direction: column;
}
/* Special Rules for Tablets, Desktops */
@media only screen and (min-width: 530px) {
.flexbox-container {
flex-direction: row;
justify-content: space-evenly;
}
}
.flexbox-container > div {
flex-grow: 1;
padding: 10px;
border: 1px dotted silver;
}
</style>
</head>
<body>
<div class="flexbox-container">
<div>
<h3>Column 1</h3>
</div>
<div>
<h3>Column 2</h3>
<h3>Column 2</h3>
<h3>Column 2</h3>
</div>
<div>
<h3>Column 3</h3>
</div>
</div>
</body>
</html>

Nancy O'Shea— Product User & Community Expert

ALsp

Legend

Are you sure about that code, Nancy? It doesn't seem right. I put together a quick test page with your code followed by a quick layout made with our Harmony Flexbox tool:

Flexbox Columns

ALsp

Legend

Using floats is not a modern approach. You should consider using Flexbox or, at the least display: table. Both of these methods will naturally achieve the equal height columns you are attempting, which will not happen with your min-height solution. That said, the mispositioning of you right column, along with the "indent" of your 3 column structure, is caused by 3 things:

1. The 10px padding on your container

2. The use of "clear"

3. The "slip" that Hans-G mentioned

I would start over using a different approach. But if you really, really want to use floats, here is a more modern clearing technique:

#container:after {

display: table;

clear: both;

content: "";

}

hans-g.

Legend

Hello,

sorry, at the moment I can't test the effects of your two different advices "right-col" and "right_col", but maybe you will find it out of yourself.

Hans-Günter

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