CSS margin / padding issue identical code different results

[Eniroth]

so i’ve got a wrapper that has a set percentage width and inside that wrapper i have a 5 column layout each 20%

then i’ve made three div’s in the HTML doc where the first and third have 20% of the parent divs width each and the center “content” div has the rest (60%)
inside the three divs are for now just some lorem ipsum in a paragraph but for some reason the padding only works on the center and right hand divs, when i apply the same padding to the left div inside the wrapper it doesnt do anything.

I have tried every which way, i have copied the html for the right side and simply renamed the referenses and copied the CSS for the right side and just renamed the referenses but nothing works, the left column has no padding no matter what i do.
also for some reason the borders that are in the “content” div (left and right side borders) only go as far as the lorem ipsum, how can i set them to go say 100% of parent div?

the CSS for the wrapper and sub-elements:

.wrapper {
	width:60%;
	height:100%;
	background-color:lightgray;
	border: 1px solid black;
	margin-left:auto;
	margin-right:auto;
	overflow:hidden;
}

<!-----inside wrapper----->
.leftcol {
	float:left;
	display:inline-block;
	padding:5px;
}

.content {
	padding:5px;
	border-right:1px solid black;
	border-left:1px solid black;
	float:left;
	display:inline-block;
}

.rightcol {
	float:left;
	display:inline-block;
	padding:5px;
}

and the html with the column referenses and their nested divs including the lorem ipsum:

		<div class="wrapper">
			
						
			<div class="col-1">
				<div class="leftcol">
						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
						Nam ut ante tempor quam luctus tempor tincidunt et enim. 
						Vestibulum in dignissim diam. Ut lacinia, ipsum eu mollis 
						bibendum, sapien nunc ullamcorper magna, a mattis velit mauris 
						facilisis purus. Donec in augue quis leo blandit dictum. 
						Vestibulum eget vestibulum enim. Pellentesque in mattis erat,
						non posuere sem. Nam egestas sollicitudin sem, convallis auctor 
						lorem malesuada varius. Aenean consectetur lectus ut tristique aliquam. 
						Suspendisse ullamcorper felis id arcu malesuada, eu maximus nulla finibus. 
						Praesent rutrum erat vitae orci laoreet pellentesque. Praesent ullamcorper ligula 
						imperdiet lacus tristique, at imperdiet velit euismod. Nunc vel purus erat.
						Phasellus rhoncus sem vitae mauris suscipit, eget dictum erat luctus. Quisque 
						risus purus, eleifend id orci nec, egestas vehicula neque. Sed fermentum turpis 
						ornare fermentum dignissim. Pellentesque maximus neque sed mi euismod, quis porttitor
						ipsum sagittis. Nullam dapibus lectus ut elit tincidunt, a convallis sem pulvinar. 
						Nunc tincidunt ullamcorper lectus at viverra. Cras elit metus, laoreet sed accumsan
						venenatis, rutrum non tortor. Mauris nec justo vel tortor luctus placerat eu a dui. 
						Sed porta eros in tortor euismod faucibus. Duis tortor risus, imperdiet in magna et, 
						facilisis fermentum tortor. Maecenas condimentum vitae tellus nec tristique.
						</p>
				</div>
			</div>
			
			<div class="col-3">
				<div class="content">
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
						Nam ut ante tempor quam luctus tempor tincidunt et enim. 
						Vestibulum in dignissim diam. Ut lacinia, ipsum eu mollis 
						bibendum, sapien nunc ullamcorper magna, a mattis velit mauris 
						facilisis purus. Donec in augue quis leo blandit dictum. 
						Vestibulum eget vestibulum enim. Pellentesque in mattis erat,
						non posuere sem. Nam egestas sollicitudin sem, convallis auctor 
						lorem malesuada varius. Aenean consectetur lectus ut tristique aliquam. 
						Suspendisse ullamcorper felis id arcu malesuada, eu maximus nulla finibus. 
						Praesent rutrum erat vitae orci laoreet pellentesque. Praesent ullamcorper ligula 
						imperdiet lacus tristique, at imperdiet velit euismod. Nunc vel purus erat.
						Phasellus rhoncus sem vitae mauris suscipit, eget dictum erat luctus. Quisque 
						risus purus, eleifend id orci nec, egestas vehicula neque. Sed fermentum turpis 
						ornare fermentum dignissim. Pellentesque maximus neque sed mi euismod, quis porttitor
						ipsum sagittis. Nullam dapibus lectus ut elit tincidunt, a convallis sem pulvinar. 
						Nunc tincidunt ullamcorper lectus at viverra. Cras elit metus, laoreet sed accumsan
						venenatis, rutrum non tortor. Mauris nec justo vel tortor luctus placerat eu a dui. 
						Sed porta eros in tortor euismod faucibus. Duis tortor risus, imperdiet in magna et, 
						facilisis fermentum tortor. Maecenas condimentum vitae tellus nec tristique.</p>
			</div>
			</div>
			
			<div class="col-1">
				<div class="rightcol">
					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
						Nam ut ante tempor quam luctus tempor tincidunt et enim. 
						Vestibulum in dignissim diam. Ut lacinia, ipsum eu mollis 
						bibendum, sapien nunc ullamcorper magna, a mattis velit mauris 
						facilisis purus. Donec in augue quis leo blandit dictum. 
						Vestibulum eget vestibulum enim. Pellentesque in mattis erat,
						non posuere sem. Nam egestas sollicitudin sem, convallis auctor 
						lorem malesuada varius. Aenean consectetur lectus ut tristique aliquam. 
						Suspendisse ullamcorper felis id arcu malesuada, eu maximus nulla finibus. 
						Praesent rutrum erat vitae orci laoreet pellentesque. Praesent ullamcorper ligula 
						imperdiet lacus tristique, at imperdiet velit euismod. Nunc vel purus erat.
						Phasellus rhoncus sem vitae mauris suscipit, eget dictum erat luctus. Quisque 
						risus purus, eleifend id orci nec, egestas vehicula neque. Sed fermentum turpis 
						ornare fermentum dignissim. Pellentesque maximus neque sed mi euismod, quis porttitor
						ipsum sagittis. Nullam dapibus lectus ut elit tincidunt, a convallis sem pulvinar. 
						Nunc tincidunt ullamcorper lectus at viverra. Cras elit metus, laoreet sed accumsan
						venenatis, rutrum non tortor. Mauris nec justo vel tortor luctus placerat eu a dui. 
						Sed porta eros in tortor euismod faucibus. Duis tortor risus, imperdiet in magna et, 
						facilisis fermentum tortor. Maecenas condimentum vitae tellus nec tristique.</p>
				</div>
			</div>
		</div>

[ronpat]

This is your CSS stylesheet…

<!-----inside wrapper----->
.leftcol {
	float:left;
	display:inline-block;
	padding:5px;
}

The HTML comment mark is not allowed in the CSS stylesheet. It is corrupting the .leftcol rule. Put the comment between CSS comment marks instead of HTML marks and you’re good to go.

[Gandalf]

Incidentally

<!-----inside wrapper----->

is not a valid comment. There should be a space after the first 2 hyphens and before the last 2 hyphens, and two or more consecutive hyphens are not allowed in a comment. https://www.w3.org/TR/html401/intro/sgmltut.html#h-3.2.4

[Eniroth]

Thank you so much, you saved my day. Any idea about the border height?
And yeah, i’m fairly new to building websites (its not design when i’m still learning) thats why
i make these mistakes.

[ronpat]

I had started to add a “PS” asking why you were using floats instead of the CSS table/table-cell method of creating columns, but decided to withold comment since you seemed to be using a grid and changing methods mid-stream could be confusing (to me it would be).

If you were not sold on grids or floats, I would recommend the CSS table/table-cell method. Conveniently, @SamA74 just posted an example showing how one might create such a page in another of your threads:

Div in wrapper does not stay where it should

i have a simple issue with one out of three divs in a wrapper div that jumps down when i resize the browser. the center div does not, but the right div does. code: #wrapper { margin: 0 auto; width: 922px; } #header { width: 900px; float: left; padding: 10px; border: 1px solid #ccc; height: 100px; margin: 10px 0px 0px 0px; background: rgba(172,229,238,0.2); text-align:center; } #leftcolumn { border: 1px solid #ccc; background: rgba(58,151,165,0.2); margin: 0px 0px 0px 0px; paddi…

[Eniroth]

thank you ronpat, i have considered @samA74’s response and it is without a doubt the wiser choice. I am trying at this time, however, to learn more about how things work and why. i’ve read all i can about this on w3schools and other forums that are easily accessible via google, i probably forgot half and missed the mark on most of what i read anyway. I am very new to this, your comment about changing methods mid-stream interests me, are grids and floats not compatible? do they cancel eachother out? does floats and grids do roughly the same thing? i did not understand it to be this way. Thanks for taking the time to help a noob.

[ronpat]

@Eniroth

the borders that are in the “content” div (left and right side borders) only go as far as the lorem ipsum, how can i set them to go say 100% of parent div?

I apologize. I missed this part of your question.

First, you have assigned a border to two containers:

.wrapper {
	border: 1px solid black;
}
.content {
	border-right:1px solid black;
	border-left:1px solid black;
}

Therefore, the border beside the content section of the page appears to be wider than the border beside the left and right columns.

It sounds like you do not need the additional left and right borders beside the content section. If you DO, please describe how you expect the look of the page to change at wide and narrow widths.

[Eniroth]

@ronpat Allright so i’ve been fighting with media queries and taken a break from the border stuff but if i just copy the little progress i’ve made into here you should see exactly what i’m after. just copy the code into your own .css and .html doc and you’ll see why the content borders are there. (they separate content from right and left column)

here is the CSS:

BODY {
	background-color: darkgray;
	color: black;
	margin:0;
	padding:0;
	font-size:0.8em;
}

/* column layout */
*, *:after, *:before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

[class*='col-'] {
  float: left;
}

.grid:after {
  content: "";
  display: table;
  clear: both;
}

[class*="col-"] {
    width: 100%;
}

@media only screen and (min-width: 600px){
.col-1 {width:20%;}
.col-2 {width:40%;}
.col-3 {width:60%;}
.col-4 {width:80%;}
.col-5 {width:100%;}
}

@media only screen and (min-width: 768px){
.col-1 {width:20%;}
.col-2 {width:40%;}
.col-3 {width:60%;}
.col-4 {width:80%;}
.col-5 {width:100%;}	
}

@media only screen and (min-width: 600px){
	[class*='col-'] {
  	padding-right: 20px;
	}
}

[class*='col-']:last-of-type {
  padding-right: 0;
}


/* header and sidebars */
.header {
	width:100%;
	height: 70px;
	background-color:black;
	color:white;
	font-size:1.8em;
	text-align:center;
	line-height:55px;
}

.profile {
	width: 100%;
	height: 50px;
	background-color:gray;
	overflow:hidden;
	float:left;
	margin-left:auto;
	margin-right:auto;
	padding:2px;
	border-left: 1px solid black;
	border-bottom: 1px solid black;
	border-right: 1px solid black;
}
@media only screen and (min-width: 600px){
	
.profile {
	background-color:gray;
	width:15%;
	float:left;
	overflow:hidden;
	margin-left:10px;
	padding:6px;
	height:auto;
	border:0;
	}
}

.rightmenu {
	background-color:gray;
	width:25%;
	float:right;
	overflow:hidden;
	margin-right:10px;
	padding:6px;
	border-right:1px solid black;
	border-left:1px solid black;
	border-bottom:1px solid black;
}
@media only screen and (min-width: 600px){
	.rightmenu {
		width:15%;
		border:0;
	}
}



 /* central 3 columns */
.wrapper {
	width:60%;
	height:auto;
	background-color:white;
	border-right: 1px solid black;
	border-left: 1px solid black;
	border-bottom: 1px solid black;
	margin-left:auto;
	margin-right:auto;
	overflow:hidden;
	font-size:0.6em;
}



/* inside wrapper */

.leftcol {
	display:inline-block;
	padding:5px;
}

@media only screen and (min-width: 600px){
	.content {
	border-right:1px solid black;
	border-left:1px solid black;
	}
	
	.wrapper {
		font-size:1.1em;
	}
	
}

@media only screen and (max-width: 600px){
	.content {
		border-top:1px solid black;
		border-bottom: 1px solid black;
		min-height: 100px;
        height: auto;
	}
}

.content {
	padding:5px;
	background-color:darkgray;
	display:flex;
	height:auto;
}

.rightcol {
	display:inline-block;
	padding:5px;
}

here is the HTML:

<HEAD>
<title> This is title</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<LINK REL="STYLESHEET" TYPE="TEXT/CSS" HREF="CSS.css">

</HEAD>

<BODY>
	<div class="header">This is the header</div>
		<div class="gutter">
		<div class="profile">
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
						Nam ut ante tempor quam luctus tempor tincidunt et enim. 
						Vestibulum in dignissim diam. Ut lacinia, ipsum eu mollis 
						bibendum, sapien nunc ullamcorper magna, a mattis velit mauris 
						facilisis purus. Donec in augue quis leo blandit dictum. 
						Vestibulum eget vestibulum enim. Pellentesque in mattis erat,
						non posuere sem. Nam egestas sollicitudin sem, convallis auctor 
						lorem malesuada varius. Aenean consectetur lectus ut tristique aliquam. 
						Suspendisse ullamcorper felis id arcu malesuada, eu maximus nulla finibus. 
						Praesent rutrum erat vitae orci laoreet pellentesque. Praesent ullamcorper ligula 
						imperdiet lacus tristique, at imperdiet velit euismod. Nunc vel purus erat.
						Phasellus rhoncus sem vitae mauris suscipit, eget dictum erat luctus. Quisque 
						risus purus, eleifend id orci nec, egestas vehicula neque. Sed fermentum turpis 
						ornare fermentum dignissim. Pellentesque maximus neque sed mi euismod, quis porttitor
						ipsum sagittis. Nullam dapibus lectus ut elit tincidunt, a convallis sem pulvinar. 
						Nunc tincidunt ullamcorper lectus at viverra. Cras elit metus, laoreet sed accumsan
						venenatis, rutrum non tortor. Mauris nec justo vel tortor luctus placerat eu a dui. 
						Sed porta eros in tortor euismod faucibus. Duis tortor risus, imperdiet in magna et, 
						facilisis fermentum tortor. Maecenas condimentum vitae tellus nec tristique.
						</p>
		</div>
		
		<div class="rightmenu">
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
						Nam ut ante tempor quam luctus tempor tincidunt et enim. 
						Vestibulum in dignissim diam. Ut lacinia, ipsum eu mollis 
						bibendum, sapien nunc ullamcorper magna, a mattis velit mauris 
						facilisis purus. Donec in augue quis leo blandit dictum. 
						Vestibulum eget vestibulum enim. Pellentesque in mattis erat,
						non posuere sem. Nam egestas sollicitudin sem, convallis auctor 
						lorem malesuada varius. Aenean consectetur lectus ut tristique aliquam. 
						Suspendisse ullamcorper felis id arcu malesuada, eu maximus nulla finibus. 
						Praesent rutrum erat vitae orci laoreet pellentesque. Praesent ullamcorper ligula 
						imperdiet lacus tristique, at imperdiet velit euismod. Nunc vel purus erat.
						Phasellus rhoncus sem vitae mauris suscipit, eget dictum erat luctus. Quisque 
						risus purus, eleifend id orci nec, egestas vehicula neque. Sed fermentum turpis 
						ornare fermentum dignissim. Pellentesque maximus neque sed mi euismod, quis porttitor
						ipsum sagittis. Nullam dapibus lectus ut elit tincidunt, a convallis sem pulvinar. 
						Nunc tincidunt ullamcorper lectus at viverra. Cras elit metus, laoreet sed accumsan
						venenatis, rutrum non tortor. Mauris nec justo vel tortor luctus placerat eu a dui. 
						Sed porta eros in tortor euismod faucibus. Duis tortor risus, imperdiet in magna et, 
						facilisis fermentum tortor. Maecenas condimentum vitae tellus nec tristique.
						</p>
		</div>
		</div>	
		<div class="wrapper">
			
						
			<div class="col-1">
				<div class="leftcol">
						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
						Nam ut ante tempor quam luctus tempor tincidunt et enim. 
						Vestibulum in dignissim diam. Ut lacinia, ipsum eu mollis 
						bibendum, sapien nunc ullamcorper magna, a mattis velit mauris 
						facilisis purus. Donec in augue quis leo blandit dictum. 
						Vestibulum eget vestibulum enim. Pellentesque in mattis erat,
						non posuere sem. Nam egestas sollicitudin sem, convallis auctor 
						lorem malesuada varius. Aenean consectetur lectus ut tristique aliquam. 
						Suspendisse ullamcorper felis id arcu malesuada, eu maximus nulla finibus. 
						Praesent rutrum erat vitae orci laoreet pellentesque. Praesent ullamcorper ligula 
						imperdiet lacus tristique, at imperdiet velit euismod. Nunc vel purus erat.
						Phasellus rhoncus sem vitae mauris suscipit, eget dictum erat luctus. Quisque 
						risus purus, eleifend id orci nec, egestas vehicula neque. Sed fermentum turpis 
						ornare fermentum dignissim. Pellentesque maximus neque sed mi euismod, quis porttitor
						ipsum sagittis. Nullam dapibus lectus ut elit tincidunt, a convallis sem pulvinar. 
						Nunc tincidunt ullamcorper lectus at viverra. Cras elit metus, laoreet sed accumsan
						venenatis, rutrum non tortor. Mauris nec justo vel tortor luctus placerat eu a dui. 
						Sed porta eros in tortor euismod faucibus. Duis tortor risus, imperdiet in magna et, 
						facilisis fermentum tortor. Maecenas condimentum vitae tellus nec tristique.
						</p>
				</div>
			</div>
			
			<div class="col-3">
				<div class="content">
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
						Nam ut ante tempor quam luctus tempor tincidunt et enim. 
						Vestibulum in dignissim diam. Ut lacinia, ipsum eu mollis 
						bibendum, sapien nunc ullamcorper magna, a mattis velit mauris 
						facilisis purus. Donec in augue quis leo blandit dictum. 
						Vestibulum eget vestibulum enim. Pellentesque in mattis erat,
						non posuere sem. Nam egestas sollicitudin sem, convallis auctor 
						lorem malesuada varius. Aenean consectetur lectus ut tristique aliquam. 
						Suspendisse ullamcorper felis id arcu malesuada, eu maximus nulla finibus. 
						Praesent rutrum erat vitae orci laoreet pellentesque. Praesent ullamcorper ligula 
						imperdiet lacus tristique, at imperdiet velit euismod. Nunc vel purus erat.
						Phasellus rhoncus sem vitae mauris suscipit, eget dictum erat luctus. Quisque 
						risus purus, eleifend id orci nec, egestas vehicula neque. Sed fermentum turpis 
						ornare fermentum dignissim. Pellentesque maximus neque sed mi euismod, quis porttitor
						ipsum sagittis. Nullam dapibus lectus ut elit tincidunt, a convallis sem pulvinar. 
						Nunc tincidunt ullamcorper lectus at viverra. Cras elit metus, laoreet sed accumsan
						venenatis, rutrum non tortor. Mauris nec justo vel tortor luctus placerat eu a dui. 
						Sed porta eros in tortor euismod faucibus. Duis tortor risus, imperdiet in magna et, 
						facilisis fermentum tortor. Maecenas condimentum vitae tellus nec tristique.</p>
			</div>
			</div>
			
			<div class="col-1">
				<div class="rightcol">
					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
						Nam ut ante tempor quam luctus tempor tincidunt et enim. 
						Vestibulum in dignissim diam. Ut lacinia, ipsum eu mollis 
						bibendum, sapien nunc ullamcorper magna, a mattis velit mauris 
						facilisis purus. Donec in augue quis leo blandit dictum. 
						Vestibulum eget vestibulum enim. Pellentesque in mattis erat,
						non posuere sem. Nam egestas sollicitudin sem, convallis auctor 
						lorem malesuada varius. Aenean consectetur lectus ut tristique aliquam. 
						Suspendisse ullamcorper felis id arcu malesuada, eu maximus nulla finibus. 
						Praesent rutrum erat vitae orci laoreet pellentesque. Praesent ullamcorper ligula 
						imperdiet lacus tristique, at imperdiet velit euismod. Nunc vel purus erat.
						Phasellus rhoncus sem vitae mauris suscipit, eget dictum erat luctus. Quisque 
						risus purus, eleifend id orci nec, egestas vehicula neque. Sed fermentum turpis 
						ornare fermentum dignissim. Pellentesque maximus neque sed mi euismod, quis porttitor
						ipsum sagittis. Nullam dapibus lectus ut elit tincidunt, a convallis sem pulvinar. 
						Nunc tincidunt ullamcorper lectus at viverra. Cras elit metus, laoreet sed accumsan
						venenatis, rutrum non tortor. Mauris nec justo vel tortor luctus placerat eu a dui. 
						Sed porta eros in tortor euismod faucibus. Duis tortor risus, imperdiet in magna et, 
						facilisis fermentum tortor. Maecenas condimentum vitae tellus nec tristique.</p>
				</div>
			</div>
		</div>	
	

</BODY>

</HTML>

The html implemented in a weird way that i did not intend for but the stuff missing works in my browser. the only thing i’m unsure of how to do right now is the damn content border >600px;
As you can see, the content borders work fine when you’re under 600px because they are the full 100% width of the content box, i need them to be 100% height of the parent div above 600px for them to reach all the way down to wherever the sidecolumns end.
The height: auto; and min-height:100px; represents my latest attempts at fixing the issue. Didn’t work (probably not surprising for anyone who knows what they’re doing)

The end goal here is to build a navigation menu that is a dropdown for mobile and slideout for desktops, the menu will be situated in the .profile div. the borders in there are important because the different links in that menu will each lead to a new and identical page except for whats in the wrapper div, which consists of just thoose three (.leftcol, .content, and .rightcol) That is why i need this to be dynamic and relatively adaptable.

[Eniroth]

@ronpat i hope i didn’t break some rule by posting the whole thing here. i can provide just a snippet and the relevant css if that would make you feel better. the borders extending the full height of the dynamic parent div is kind of important. i’ve also run into some issues with the navigation bar, it works horisontally (<600px) but not vertically (>600px). if you have any ideas that’d be wonderful.

[ronpat]

@Eniroth, except that the scope of the topic has changed, your post is not a problem, my comprehension of the issue(s) is. The demo seems to lack practicality. For example, this is how your code renders in a 601px window… overflowing, hidden text. (please notice the ruler, my screen rez is 100%. I made the 600px screenshot first but did not extend the ruler to 601px when I extended the window to 601px).

(I added the dashed yellow outline.)

This is the 600px wide view:

The text in the repositioned content is illegible. I don’t get where you’re going.

In any case, I recommend that a new topic be created with post #8. Hopefully, you will be able to create a more practical demo and someone with additional insight will join the conversation.

[Eniroth]

@ronpat yes this was the state of my code yesterday. the two side-menus or right and left columns inside the wrapper are not actually going to contain text. there will be only a few, short options and the wrapper div will eventually be the focus for an extensive javascript file where the wrapper can contain everything from 3 columns with additional menus to a single div that fills the parent wrapper, the menu that initially changes what displays there is to be situated on the .rightmenu (the actual right hand menu that is outside the wrapper) and i’ve made some headway, but still have a long way to go. the thing is that i would like this to be viewable on mobile as well as desktop, that is why i have added the media query breaks you seem concerned about. theese breaks are not necessarily static, i just had to have a value to work with, so i could see how the view would change. I might make more media queries later, or simply change from 600px to some other value.
The left hand side now has a nice and neat little menu in it with four options, a dropdown on mobile and eventually it’ll be slideout (without displacing the rest of the page) on desktop. You understand why i want the media query now?
i’m not trying to sound snarky or in any way condescending because i just learned to code VERY recently, i never coded before in my life before last friday, it feels like i’m learning so slowly and the things i want to learn are out of my grasp! but thanks to you and extensive googling, w3schools.com, youtube tutorials i’ve made some progress towards the end goals. I’m currently learning how to make RNG’s in javascript that i intend to use on this site later on but javascript is way harder than css or html so far.

I am very grateful for your help, and i don’t understand your critiscism (i love criticism, it helps me grow) so please, rephrase ?

[ronpat]

@Eniroth

I am very grateful for your help, and i don’t understand your critiscism (i love criticism, it helps me grow) so please, rephrase ?

Sorry for the sound. I hope what you hear as criticism is an expression of confusion on my part. You have started an ambitious project. Your code is propery posted. Sometimes another pair of eyes with fresh ideas helps.

PS: What’s an “RNG’s in javascript”?

Please post your new code whenever you’re ready.

[Eniroth]

@ronpat Well, an RNG is just a short for “Random Number Generator” it is a phrase used for some engines in games or when you click “random article” on wikipedia, there’s an RNG there that spits out a random value that decides which page you end up on. RNG’s are very useful for many things, i am hoping to build one in javascript that has several modifiers and / or filters so i can take certain input, convert it into number values for the RNG, have it alter the RNG slightly and it will then spit out a value with the “input” as a sort of seed.
an example of my end goal for that RNG is a dice roll 1-6.
The rng itself would be just the 1-6 dice roll.
there would be 3 or more filters or modifiers to this dice, the first would take a value and based on that value increase the whole thing +1 per 10. so if that first value was 1-9, it would stay 1-6, if it was 10-19, it would be 2-7, 20-29 it is 3-8, and so on.
the second value would work similairly but much smaller scope, with a twist. say the value is 8, the dice goes from 1-6 to 5-14. it takes the value and 50% is applied to the bottom end of the dice, and 100% to the top end.
There’s some more filter / modifier ideas but for now i need to learn how to do it so i’m starting with just an RNG that spits out a dice roll when i click a button, which is complicated enough on its own (to me, atleast!).

you can have the code as far as i’ve come, its not much further than the code i sent you but i’ve changed some bits and pieces around, feel free to say whatever you think! if you hate it don’t be shy, it is very important to me that other people find the work i do atleast somewhat pleasing.
There’s an img-url in the code now, doesn’t work properly and its an online url just to have an image to work with. Don’t worry about it and don’t overthink it too much, this is supposed to be a sort of game when i’m finished.

here’s the CSS:

BODY {
	background-color: #BBD9EE;
	color: black;
	margin:0;
	padding:0;
	font-size:0.8em;
}

/* column layout */
*, *:after, *:before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

[class*='col-'] {
  float: left;
}

.grid:after {
  content: "";
  display: table;
  clear: both;
}

[class*="col-"] {
    width: 100%;
}

@media only screen and (min-width: 600px){
.col-1 {width:20%;}
.col-2 {width:40%;}
.col-3 {width:60%;}
.col-4 {width:80%;}
.col-5 {width:100%;}
}

@media only screen and (min-width: 768px){
.col-1 {width:20%;}
.col-2 {width:40%;}
.col-3 {width:60%;}
.col-4 {width:80%;}
.col-5 {width:100%;}	
}

@media only screen and (min-width: 600px){
	[class*='col-'] {
  	padding-right: 20px;
	}
}

[class*='col-']:last-of-type {
  padding-right: 0;
}

/* color scheme 206BA4	BBD9EE	EBF4FA	C0C0C0	E7E4D3	F1EFE2 */
/* header and sidebars */
.header {
	width:100%;
	height: 70px;
	background-color:#206BA4;
	color:white;
	font-size:1.8em;
	text-align:center;
	line-height:55px;
}

.profile {
	width: 97%;
	height: 50px;
	background-color:#206BA4;
	margin-left:auto;
	margin-right:auto;
	padding-top:2px;
	padding-left:2px;
	padding-right:2px;

}

.rightmenu {
	background-color:#CCCC9A;
	width:25%;
	min-height:180px;
	max-height:500px;
	float:right;
	overflow:hidden;
	margin-right:10px;
	padding:6px;
	border-right:1px solid black;
	border-left:1px solid black;
	border-bottom:1px solid black;
}


.profilepic {
	background-image: url("https://monsterscenes.files.wordpress.com/2011/01/deadly_mask32.jpg");
	background-size:cover;
	background-repeat:no-repeat;
	height:150px;
}

.rightmenu > ul {
	padding:0;
	width:100%;
	text-align:center;
}

.profilemenu {
	width:100%;
	list-style-type:none;
}

.profilemenu:hover {
	background-color:black;
}
.profilemenu:hover a {
	color:white;
}
.profilemenu a {
	text-decoration:none;
	color:black;
}

#profilemenu.open {
	
}

/* battle tag */



/* end battle tag */


#healthbar {
	width:100%;
	background-color:#cccccc;
	margin-top:2px;
	margin-bottom:1px;

}

#healthbarfill {
	width:25%;
	background-color:red;
	height:15px;
	border:1px solid;
	border-color:#cccccc;
}

#energybar {
	width:100%;
	background-color:#cccccc;
	margin-top:1px;
	margin-bottom:2px;
}

#energybarfill {
	width:50%;
	background-color:yellow;
	height:15px;
	border:1px solid;
	border-color:#cccccc;
}



/* slide-out / dropdown menu in profile */
@media only screen and (max-width: 600px){
.nav-main > ul {
	height:100%;
}

.nav-main > ul > li {
	height:100%;
}

.nav-main > ul > li a{
	height:100%;
}
}


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

.profile {
	width:15%;
	height:auto;
	float:left;
	overflow:hidden;
	margin-left:10px;
	padding:0px;
	border:0;
	}

.rightmenu {
	width:15%;
	border:0;
	}


.nav-main {
	max-height:500px;
	min-height:177px;

}

.logo {
	height:45px;
	width:100%;
	text-align:center;
	
}

.nav-main > ul > li {
	width:100%;
	text-align:center;
	float:none;
}

.nav-main > ul > li a{
	width:100%;
	text-align:center;
}

.logo::after {
    content: "";
    clear: both;
    display: table;
}

}



.nav-main {
	width:100%;
	background-color:#206BA4;
	margin:0;
	padding:0px;
	height:48px;
	line-height:20px;
	border:0px;
	float:left;
}

.nav-main > ul {
	margin:0;
	padding:0;
	list-style-type:none;
}

.nav-main > ul > li {
	float:left;
	margin-top: auto;
	margin-bottom: auto;
}

.nav-main > ul > li a{
	text-align:center;
}

.logo {
	float:left;
	padding:10px;
	font-size:1.4em;
	color:white;
}

.nav-item {
	text-decoration: none;
	display:inline-block;
	height:45px;
	line-height:20px;
	padding:12px;
	color:white;
}

.nav-item:hover {
	background-color:gray;
	color:white;
}

.nav-item:focus {
	background-color:gray;
}

.nav-item:focus ~ .nav-content {
	max-height:500px;
	-webkit-transition:max-height 400ms ease-in;
	-moz-transition:max-height 400ms ease-in;
	transition:max-height 400ms ease-in;
}

.nav-content {
	position:absolute;
	overflow:hidden;
	background-color:black;
	padding:0px;
	width:80px;
	max-height:0px;
}

.nav-content a {
	text-decoration:none;
	color:white;
	display:inline-block;
}

.nav-content a:hover {
	background-color:gray;
	color:white;
	width:100%;
}

.nav-sub {
	padding:0px;	
}

.nav-sub > ul {
	list-style-type:none;
	padding:0px;
}

.nav-sub > ul > li {
	padding:0px;
	text-align:center;
}

 /* central 3 columns */
.wrapper {
	width:60%;
	height:auto;
	background-color:#F1EFE2;
	border-right: 1px solid black;
	border-left: 1px solid black;
	border-bottom: 1px solid black;
	margin-left:auto;
	margin-right:auto;
	overflow:hidden;
	font-size:0.6em;
}



/* inside wrapper */

.leftcol {
	display:inline-block;
	padding:5px;
}

@media only screen and (min-width: 600px){
	.content {
	border-right:1px solid black;
	border-left:1px solid black;
	}
	
	.wrapper {
		font-size:1.1em;
	}
	
}

@media only screen and (max-width: 600px){
	.content {
		border-top:1px solid black;
		border-bottom: 1px solid black;
		min-height: 100px;
        height: auto;
	}
}

.content {
	padding:5px;
	background-color:#CCCC9A;
	display:flex;
	height:auto;
}

.rightcol {
	display:inline-block;
	padding:5px;
}

here’s the HTML:

<!DOCTYPE HTML>

<HTML>

<HEAD>
<title> This is title</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<LINK REL="STYLESHEET" TYPE="TEXT/CSS" HREF="CSS.css">

</HEAD>

<BODY>
	<div class="header">This is the header</div>
		<div class="gutter">
		<div class="profile">
				<nav class="nav-main">
					<div class="logo">menu</div>
						<ul>
							<li>
							
							<a class="nav-item" href="#">CSS</a>
								<div class="nav-content">
									<div class="nav-sub"> 
								
									<ul>
										<li><a href="#">
										menu content
										</a></li>
										<li><a href="#">
										menu content
										</a></li>
										<li><a href="#">
										menu content
										</a></li>
										<li><a href="#">
										menu content
										</a></li>
									</ul>

									</div>
								</div>
							</li>
							
							
							
							<li>
							
							<a class="nav-item" href="#">ONLY</a>
								
								<div class="nav-content">
									<div class="nav-sub"> 
								
									<ul>
										<li><a href="#">
										menu content
										</a></li>
										<li><a href="#">
										menu content
										</a></li>
										<li><a href="#">
										menu content
										</a></li>
										<li><a href="#">
										menu content
										</a></li>
									</ul>

									</div>
								</div>
								
							</li>
							<li>
							
							<a class="nav-item" href="#">MENU</a>
								
								<div class="nav-content">
									<div class="nav-sub"> 
								
									<ul>
										<li><a href="#">
										menu content
										</a></li>
										<li><a href="#">
										menu content
										</a></li>
										<li><a href="#">
										menu content
										</a></li>
										<li><a href="#">
										menu content
										</a></li>
									</ul>

									</div>
								</div>
								
							
							</li>
						</ul>
				</nav>
		</div>
		
		<div class="rightmenu">
			<ul>
				<li class="profilemenu"><a id="character" href="#">Character</a>
				</li>
				<li class="profilemenu"><a id="Backpack" href="#">Backpack</a>
				</li>
				<li class="profilemenu"><a id="Battle" href="#">Battle</a>
				</li>
				<li class="profilemenu"><a id="Hunt" href="#">Hunt</a>
				</li>
			</ul>
			<div class="profilepic">  </div>
				<div id="healthbar">
					<div id="healthbarfill">health</div>
					</div>
				<div id="energybar">
					<div id="energybarfill">energy</div>
				</div>
			<p>profile image, health and energy bars
						</p>
		</div>
		</div>	
		<div class="wrapper">
			
						
			<div class="col-1">
				<div class="leftcol">
						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
						Nam ut ante tempor quam luctus tempor tincidunt et enim. 
						Vestibulum in dignissim diam. Ut lacinia, ipsum eu mollis 
						bibendum, sapien nunc ullamcorper magna, a mattis velit mauris 
						facilisis purus. Donec in augue quis leo blandit dictum. 
						Vestibulum eget vestibulum enim. Pellentesque in mattis erat,
						non posuere sem. Nam egestas sollicitudin sem, convallis auctor 
						lorem malesuada varius. Aenean consectetur lectus ut tristique aliquam. 
						Suspendisse ullamcorper felis id arcu malesuada, eu maximus nulla finibus. 
						Praesent rutrum erat vitae orci laoreet pellentesque. Praesent ullamcorper ligula 
						imperdiet lacus tristique, at imperdiet velit euismod. Nunc vel purus erat.
						Phasellus rhoncus sem vitae mauris suscipit, eget dictum erat luctus. Quisque 
						risus purus, eleifend id orci nec, egestas vehicula neque. Sed fermentum turpis 
						ornare fermentum dignissim. Pellentesque maximus neque sed mi euismod, quis porttitor
						ipsum sagittis. Nullam dapibus lectus ut elit tincidunt, a convallis sem pulvinar. 
						Nunc tincidunt ullamcorper lectus at viverra. Cras elit metus, laoreet sed accumsan
						venenatis, rutrum non tortor. Mauris nec justo vel tortor luctus placerat eu a dui. 
						Sed porta eros in tortor euismod faucibus. Duis tortor risus, imperdiet in magna et, 
						facilisis fermentum tortor. Maecenas condimentum vitae tellus nec tristique.
						</p>
				</div>
			</div>
			
			<div class="col-3">
				<div class="content">
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
						Nam ut ante tempor quam luctus tempor tincidunt et enim. 
						Vestibulum in dignissim diam. Ut lacinia, ipsum eu mollis 
						bibendum, sapien nunc ullamcorper magna, a mattis velit mauris 
						facilisis purus. Donec in augue quis leo blandit dictum. 
						Vestibulum eget vestibulum enim. Pellentesque in mattis erat,
						non posuere sem. Nam egestas sollicitudin sem, convallis auctor 
						lorem malesuada varius. Aenean consectetur lectus ut tristique aliquam. 
						Suspendisse ullamcorper felis id arcu malesuada, eu maximus nulla finibus. 
						Praesent rutrum erat vitae orci laoreet pellentesque. Praesent ullamcorper ligula 
						imperdiet lacus tristique, at imperdiet velit euismod. Nunc vel purus erat.
						Phasellus rhoncus sem vitae mauris suscipit, eget dictum erat luctus. Quisque 
						risus purus, eleifend id orci nec, egestas vehicula neque. Sed fermentum turpis 
						ornare fermentum dignissim. Pellentesque maximus neque sed mi euismod, quis porttitor
						ipsum sagittis. Nullam dapibus lectus ut elit tincidunt, a convallis sem pulvinar. 
						Nunc tincidunt ullamcorper lectus at viverra. Cras elit metus, laoreet sed accumsan
						venenatis, rutrum non tortor. Mauris nec justo vel tortor luctus placerat eu a dui. 
						Sed porta eros in tortor euismod faucibus. Duis tortor risus, imperdiet in magna et, 
						facilisis fermentum tortor. Maecenas condimentum vitae tellus nec tristique.</p>
			</div>
			</div>
			
			<div class="col-1">
				<div class="rightcol">
					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
						Nam ut ante tempor quam luctus tempor tincidunt et enim. 
						Vestibulum in dignissim diam. Ut lacinia, ipsum eu mollis 
						bibendum, sapien nunc ullamcorper magna, a mattis velit mauris 
						facilisis purus. Donec in augue quis leo blandit dictum. 
						Vestibulum eget vestibulum enim. Pellentesque in mattis erat,
						non posuere sem. Nam egestas sollicitudin sem, convallis auctor 
						lorem malesuada varius. Aenean consectetur lectus ut tristique aliquam. 
						Suspendisse ullamcorper felis id arcu malesuada, eu maximus nulla finibus. 
						Praesent rutrum erat vitae orci laoreet pellentesque. Praesent ullamcorper ligula 
						imperdiet lacus tristique, at imperdiet velit euismod. Nunc vel purus erat.
						Phasellus rhoncus sem vitae mauris suscipit, eget dictum erat luctus. Quisque 
						risus purus, eleifend id orci nec, egestas vehicula neque. Sed fermentum turpis 
						ornare fermentum dignissim. Pellentesque maximus neque sed mi euismod, quis porttitor
						ipsum sagittis. Nullam dapibus lectus ut elit tincidunt, a convallis sem pulvinar. 
						Nunc tincidunt ullamcorper lectus at viverra. Cras elit metus, laoreet sed accumsan
						venenatis, rutrum non tortor. Mauris nec justo vel tortor luctus placerat eu a dui. 
						Sed porta eros in tortor euismod faucibus. Duis tortor risus, imperdiet in magna et, 
						facilisis fermentum tortor. Maecenas condimentum vitae tellus nec tristique.</p>
				</div>
			</div>
		</div>	
	
	<script type="text/javascript" src="Javascript.js"></script>
</BODY>

</HTML>

again the code implemented weirdly on the page but i hope you sorta get it anyway. the javascript file as of right now contains like 5 lines of code and that’s all, i’m learning javascript separate from this project so that i don’t mess it up too much if you have ideas about that border i’m all ears, also the dropdown menu works for mobile as far as i’ve gotten but for desktop i haven’t found out how to make it go sideways instead. if you have input on anything, anything at all, i’m grateful. If you think it is too complicated (the site itself) or if you think its ugly af or anything don’t hesitate to tell me. i’m trying to make a small game for the community i live in so that we have something we can do together. it has to be fairly easy to understand and use the page itself. Thank you @ronpat !

[ronpat]

Testing an isolated concept only. This is not your code .

Is this the way you would like the center columns/box to behave? Full height at wide widths, stacked boxes at narrow widths. And check out the borders.

<!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.0">
    <title>table within table</title>
<!--
full height columns
-->
    <style type="text/css">
html {
    height:100%;
}
body {
    height:100%;
    padding:0;
    margin:0;
}
.outer,
.content {
    display:table;
    width:80%;
    height:100%;
    background-color:#ccc;
    margin:0 auto;
}
.content {
    width:100%;
}
.trow {
    display:table-row;
}
.tcell {
    display:table-cell;
    vertical-align:top;
    border:1px solid black;
    border-top:none;
}
.trow:first-child {
    height:1px;
}
h1 {
	width:100%;
	line-height:70px;
	background-color:black;
	color:white;
	font-size:1.8em;
	text-align:center;
    margin:0 auto;
}
.col1b {
    width:25%;
    background-color:#ded;
}
.col2b {
    background-color:#ede;
    border-left:none;
    border-right:none;
}
.col3b {
    width:25%;
    background-color:#ded;
}
@media screen and (max-width:800px) {
    .content,.outer {height:auto;}
    .tcell {
        display:block;
        width:auto;
        overflow:hidden;
        border:1px solid black;
        border-top:none;
    }
}
    </style>
</head>
<body>

<div class="outer">
    <div class="trow">
        <h1>Header</h1>
    </div>
    <div class="trow">
        <div class="content">
            <div class="tcell col1b">
                <p>Col1b</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus commodi maiores laboriosam fugit neque iure, est repellat! Mollitia veniam consequuntur quae, animi, sint placeat a, porro voluptates quibusdam, sapiente culpa.Lorem ipsum dolor sit amet,
                consectetur adipisicing elit. Laboriosam, mollitia, impedit. Mollitia eligendi hic, sequi placeat tempora quod nam aliquam consectetur blanditiis nisi, assumenda officiis aspernatur nesciunt laudantium enim voluptatibus.Lorem ipsum dolor
                sit amet, consectetur adipisicing elit. Ab vitae cupiditate temporibus fugit, expedita magnam esse harum autem facere. Laudantium, maiores earum. Tenetur assumenda, voluptatum aliquid eligendi amet obcaecati officiis.Lorem ipsum dolor
                sit amet, consectetur adipisicing elit.</p>
            </div>
            <div class="tcell col2b">
                <p>Col2b</p>
                <p>The middle of the road.</p>
                <p>The middle of the road.</p>
            </div>
            <div class="tcell col3b">
                <p>Col3b</p>
                <p>Saepe voluptate esse sed tempore veniam velit incidunt veritatis expedita culpa, laborum nisi, quidem tenetur distinctio debitis ratione praesentium iure, ab eum.Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                Molestias similique asperiores omnis tempora velit, soluta architecto a quidem, maxime eveniet vero sed cum iure, placeat dolores odit animi nemo earum.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad quod quos, facilis odio
                voluptatum aliquid explicabo omnis blanditiis. Quae repellendus placeat unde rerum magni harum libero perferendis numquam sint exercitationem.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit fugiat rem quos quia
                eveniet, quaerat impedit officiis beatae hic numquam itaque, doloribus ea reiciendis dolorem vel voluptates necessitatibus molestias possimus.Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
            </div>
        </div>
    </div>
</div>

</body>
</html>

[Eniroth]

@ronpat YES! that is exactly it, what am i doing wrong? i don’t mind searching the code for what you did right vs my mistake myself to learn about it if you’d rather have it that way. Damn you’re good. took me two days to make what i gave you and you seem to slap some together in an afternoon. Wow! thank you yet again for being awesome!

The header should be outside the wrapper though, and stretch the full width of any screen without padding so it just fills the 100% of view (width-wise, not heightwise of course) but that is an easy thing to fix i think!

[ronpat]

I don’t have a “wrapper” in my code, so try this. (Still no promises for a happy ending.)

Make three changes in my CSS.

.outer,
.content {
    display:table;
    width:80%;  /* change from 80% to 100% */
    height:100%;
    background-color:#ccc;
    margin:0 auto;
}
.content {
    width:100%;  /* Change from 100% to 60% */
}

and change the media query max-width:

@media screen and (max-width:800px) {  /* change from 800px to 1000px or larger as desired */

Try those changes and see what happens.

Please notice how complicated my code isn’t.