0

I'm struggling with CSS and HTML and encountered a big pitfall. My HTML code is:

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
 margin: 0;
 padding: 0;
 border: 0;
 font-size: 100%;
 font: inherit;
 vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
 display: block;
}
body {
 line-height: 1;
}
ol, ul {
 list-style: none;
}
blockquote, q {
 quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
 content: '';
 content: none;
}
table {
 border-collapse: collapse;
 border-spacing: 0;
}
/* Code comes below */

body {
 background-color: lightgray;
}
.wrapper {
 width: 100%;
 background-color: #feecec;
}

.info {
 width: 100%;
}

.pink {
 padding: 5px;
 margin: 16px;
 font-family: arial; 
 font-size: 16px;
 color: #111;
 border-radius: 5px;
 border: 1px solid #cf894c;
 background-color: #fdeddc; 
}

.blue {
  padding: 5px;
 margin: 16px;
 font-family: arial; 
 font-size: 16px;
 color: #111;
 border-radius: 5px;
 border: 1px solid #3f79b7;
  background-color: #e8f6ff;
}

@media only screen and (min-width: 600px) {
 .wrapper {
  width: 100%;
  margin: 0 auto;
 }
}

@media only screen and (min-width: 900px) {
 .wrapper {
  width: 100%;
  margin: 0 auto;
 }
}

@media only screen and (min-width: 1200px) {
 .wrapper {
  width: 100%;
  margin: 0 auto;
 }
}

@media only screen and (min-width: 1500px) {
 .wrapper {
  width: 1500px;
  margin: 0 auto;
 }
}
<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title></title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="style.css">
 </head>
 <body>
  <div class="wrapper">
   <div class="pink">
    <p>
     Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    </p>
   </div>
   <div class="blue">
    <p>
     Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    </p>
   </div>
   <div class="pink">
    <p>
     Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    </p>
   </div>
   <div class="blue">
    <p>
     Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    </p>
   </div>
   <div class="pink">
    <p>
     Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    </p>
   </div>
   <div class="blue">
    <p>
     Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    </p>
   </div>
   <div class="pink">
    <p>
     Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    </p>
   </div>
  </div>
 </body>
</html>

I have a div- wrapper and inside it- six divs with paragraphs. When I add padding: 1px to the wrapper I get almost the desired state(only skewed by 1px bottom-right). If I don't add it, on the top and the bottom of the wrapper browser creates kind of margins 16px. Why is it so? I want to keep the 16px distance from the "p" element to the wrapper (and to each other) but I don't want the wrapper to hold the 16px distance from the top border. I'd be grateful for any of your help. The main goal is to create a fully responsive, simple layout with a bunch of elements thrown inside of a main, centrally located wrapper.

user2923339
  • 121
  • 2
  • 10

2 Answers2

2

I think you need to add a position to the wrapper, try adding position: absolute; to the wrapper class.

https://jsfiddle.net/kgwfytuj/2/

Jaziel_Inc
  • 82
  • 2
  • 9
  • 1
    As simple as it that. Thank you for your time and help! I've been reading and stuck for almost an hour. Thanks! – user2923339 Jun 16 '18 at 14:43
  • Glad to help, be careful with position if you are going to add more elements!, good luck. – Jaziel_Inc Jun 16 '18 at 14:49
  • Yeah... There already is a problem in >1500px width. Because of the position:absolute, the pinky wrapper goes to the topleft and I need it in the topcenter – user2923339 Jun 16 '18 at 14:54
  • 1
    Well, in that case try this: https://jsfiddle.net/kgwfytuj/9/ I added the padding of the wrapper 16px top and bottom, and delete the margin of the top and bottom element, so you can delete the position. – Jaziel_Inc Jun 16 '18 at 15:10
  • Thanks for your help! Is it normal in CSS to apply such workarounds? I am familiar with Java, Js, Node and many other programming languages and it is very rare to solve a problem in such an indirect way. I mean shall I apply this into my code every time I need centered elements with margin above? Or rather look for some prettier solution. – user2923339 Jun 16 '18 at 15:24
  • 1
    I dont have a lot of time working with CSS but i can tell you that this is how it works in most cases, i dont consider CSS a programming language, but there are implementations like SCSS i recommend you to read: https://sass-lang.com/ – Jaziel_Inc Jun 16 '18 at 15:37
  • Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/173280/discussion-between-user2923339-and-jaziel-inc). – user2923339 Jun 16 '18 at 21:50
0

I spent a couple of hours preparing final solution, with some help of Jaziel_Inc (on how to manage the margins and paddings, you can see his answer below my question- Thanks Jaziel!). I just thought it would be helpful to other folks to post the final version of that fully responsive layout in case anyone would search for it in the future.

The layout has a central element- wrapper. 7 elements in it - those are paragraphs with sample text. It had to be adjusted to different resolutions maintaining the margin of 16px between the elements and between the elements & the wrapper. Each paragraph is set to minimal width of 300px. Central element is set to maximal width of 1500px. I post a link to github https://github.com/realgs/responsiveSimpleLayout.git

Of course I'd appreciate any feedback!

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
 margin: 0;
 padding: 0;
 border: 0;
 font-size: 100%;
 font: inherit;
 vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
 display: block;
}
body {
 line-height: 1;
}
ol, ul {
 list-style: none;
}
blockquote, q {
 quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
 content: '';
 content: none;
}
table {
 border-collapse: collapse;
 border-spacing: 0;
}
/* ---------- Actual code comes below ---------- */

body {
 background-color: lightgray;
}

.wrapper {
 width: 100%;
 background-color: #feecec;
 padding: 16px 0;
 font-size: 0;
}

.pink {
 min-width: 300px; 
 padding: 5px;
 margin: 16px;
 font-family: arial; 
 font-size: 16px;
 color: #111;
 border-radius: 5px;
 border: 1px solid #cf894c;
 background-color: #fdeddc;
}

.blue {
 min-width: 300px; 
  padding: 5px;
 margin: 16px;
 font-family: arial; 
 font-size: 16px;
 color: #111;
 border-radius: 5px;
 border: 1px solid #3f79b7;
  background-color: #e8f6ff;
}

.up{
  margin: 0 16px 16px 16px;
}

.down{
  margin: 16px 16px 0 16px;
}

@media only screen and (min-width: 600px) {

 .wrapper {
  width: 100%;
  margin: 0 auto;
 }
}

@media only screen and (min-width: 900px) {

 .wrapper {
  width: 100%;
  margin: 0 auto;
  padding: 8px 0;
 }

 .pink {
     display: inline-block;    
     position: relative; 
  margin: 8px 8px 8px 16px;
  width: -webkit-calc(50% - 36px);
     width: calc(50% - 36px);
  max-width: 564px;
 }

 .blue {
     display: inline-block;    
     position: relative;
  margin: 8px 16px 8px 8px;
     width: -webkit-calc(50% - 36px);
  max-width: 564px;
 }

 div #seven {
  width: 100%;
  margin: 8px 16px 8px 16px;
  max-width: calc( 100% - 44px);
 }
}

@media only screen and (min-width: 1200px) {

 .pink {
  margin: 8px 8px 8px 8px;
  width: -webkit-calc(33.33333% - 33.33px);
     width: calc(33.33333% - 33.33px);
  max-width: 478px;
 }

 .blue {
  margin: 8px 8px 8px 8px;
     width: -webkit-calc(33.33333% - 33.33px);
  max-width: 478px;
 }

 div #seven {
  width: 100%;
  margin: 8px 16px 8px 16px;
  max-width: calc( 100% - 44px);
 }

 div #one, #four {
  margin: 8px 8px 8px 16px;
 }
}

@media only screen and (min-width: 1500px) {
 
 .wrapper {
  width: 1500px;
 }

 div #one, #two, #three, #four {
  margin: 8px 8px 8px 8px;
  width: 343px;
 }

 div #seven, #six, #five {
  margin: 8px 8px 8px 8px;
  width: 466.66px;
 }

 div #one, #five {
  margin: 8px 8px 8px 16px;
 }

}
<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title></title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="style.css">
 </head>
 <body>
  <div class="wrapper">
   <div id="one" class="pink up">
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
   </div>
   <div id="two" class="blue">
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
   </div>
   <div id="three" class="pink">
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
   </div>
   <div id="four" class="blue">
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
   </div>
   <div id="five" class="pink">
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
   </div>
   <div id="six" class="blue">
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
   </div>
   <div id="seven" class="pink down">
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
   </div>
  </div>
 </body>
</html>
user2923339
  • 121
  • 2
  • 10