Problem in understanding a sample code

Hi. I’m trying to learn html/ css by practicing and reviewing some sample code. Here there is a sample code in
https://codepen.io/cyberlinker/pen/ZEzNaWB?editors=1100

my problem is, I can not understand what are container1 and container2 each. why didn’t in the code, it just uses one div as the layout containing col1 and col2? And I can not understand why again after each col div, it used another div like sidebar inside the col1?

Good question. It’s the designers way of doing layouts, I think. :thinking:

2 Likes

Sorry but that code is full of out dated hacky bad practices and you shouldn’t follow it as an example of how to code.

It uses techniques from about 17 years ago when browsers weren’t so smart and you had to jump through hoops to get the simplest things to work. I should know as I pioneered many of those techniques but thankfully we don’t need to code like that these days.

I’ll give you an idea of what the code is doing tomorrow when I get back to the computer but for the time being keep well away :slight_smile:

3 Likes

Thank you for your help. Maybe because the course is teaching HTML/ CSS basics. I got that sample from a course in edx website here:
https://courses.edx.org/courses/course-v1:W3Cx+CSS.0x+3T2019/courseware/2fb0b177f7594d2aa29f0ffa9e3b8b0a/5999eaf51b77404eb43cdf0e62531fad/?child=first

Actually the codepen you showed is very complex and indeed most ‘so-called’ experts will not understand how and why it works. I may be doing the authors a disservice but I imagine they copied it from somewhere else to start with anyway. I couldn’t access the course without signing up but I’m guessing this is an example from 10 or 15 years away and now serves as a template as how not to design responsively. In its time it would have been seen as cutting edge but in this day and age is to be avoided like the plague. :slight_smile:

Of course I don’t know how much of the codepen is your own input but as you are asking questions about it I assume you have just copied and pasted.

Lets start at the top and work down:

body {
	margin: 0 25% 0 25%;
	min-width: 950px;
}

Effectively in one fell swoop the page is rendered more or less useless to all devices apart from devices with a 1900px or more screen width. At smaller screen sizes the design will either be cut off or mostly missing at the right edge. Never create a layout like that these days and don;t use margins on the body because that will kill responsiveness. Instead you should have used a main container width a max-width and auto margins. Don’t use a min-width of 950px unless you then change it with media queries for smaller devices.

The sole purpose of these containers is to create an equal column effect. The background of one container provides the side column and the background of the inner column provides the background for column2. In order to see both backgrounds the inner container is shifted to the right out of the way to reveal the background of the parent on the left side. Overflow:hidden is used on the parent to stop the shifted container causing a scrollbar to the right.

Then inner columns are added for the actual content which then have to be shifted back over the first containers background to provide the illusion of a full colour equalising column background. These inner columns hold no backgrounds but just content because their height is auto. The method works because all columns are children of the parent so when the children expand the parent expands and the ‘illusion’ of full column colours are maintained.

The last browser we needed to use this technique for was IE7 but since then there have been much simpler ways to do it without any hacks or multiple extra nested divs or floats. These days we’d simply use flexbox with a container and two divs for the columns. No extra divs or hacks needed.

<div id="myName">Cindy Ross </div>

That’s your page heading and should be an H1. Use html semantically and with correct structure and you will get good inbuilt accessibility thrown in for free. Most ‘assistive technologies’ and disabled rely on structured headings to move around the page and is a key feature in how easy a site is to use.

id="myName">

Stop using ids for styling as that just raises specificity issues and of course means you can never use the rule anywhere else in the page. By all means use ids to mark up important sections of your page or for access by JS but just use classes for all your styling and life will be much easier.

<div id = "sidebar">

Stop putting spaces around your attributes as that is invalid and could be ignored.

It should be:

<div id="sidebar">

Use the validator more often to pick up typos like this:

#pm {
	height: 1em;
	;
	font-size: 1.5em;

Don’t give height to elements that may change in height if more content is added; if the page is resized; or if a user zooms the text.

header {
	border-bottom: 2px solid #607880;
	height: 5.4em;
}

Use a min-height if you want an initial height for some reason but most times just give any height at all for text content.

So to summarise:

  • Don’t use floats for columns these days.
  • Don’t move things around with relative positioning.
  • Don’t fix heights for fluid content.
  • Don’t fix widths for containers unless you make them fluid for smaller screens with media queries.
  • Use classes not IDs for styling purpose.
  • Use html semantically.
  • Validate your css and html regularly as you have a missing tag in your html and an error in the css.

I would suggest that you look at the Sitepoint premium courses for learning CSS as they are well designed and follow best practices and are more or less up to date. Some of these old tutorials would have been good in their day but lead you down the wrong path as there was no such thing as responsive design and no one had a mobile phone. These days the internet is primarily accessed via phone or table with desktop trailing in last. Therefore you must design for all screen sizes right from the start.

Hope that’s cleared some points up for you :slight_smile:

5 Likes

Thank you so much for the great suggestions dear @PaulOB.

2 Likes