No replies
byronicsisyphe
byronicsisyphe's picture
Offline
newbie
Last seen: 6 years 18 weeks ago
Timezone: GMT-5
Joined: 2013-10-16
Posts: 1
Points: 2

Background: I'm in a Web Programming class (we mostly focus on back-end), though we did a quick survey of CSS2. I did my research, noticed CSS3 is the standard now. I would eventually like to make a portfolio of all my Java, PHP, C++ stuff, but I want to do it in style. I haven't touched web-design since the late 90's.

Goal of the Code: First, I am attempting to code a responsive design. Secondly, I've tried nesting absolutes in relatives..relatives in absolutes, and I'm now attempting the default settings for the div tag. I've tried float: right & float: left, which works until too much text is inputed into one of the div cols and goes outside of the wrapper div. I'm not sure what to do. If I could get help with a brief, "why" that would be great. I'm trying to get two Cols that are of equal width (50% width each) that sit aside eachother in the wrapper div (columns). It's starting to be frustrating.

As a side note, I've notice height is a weird thing when doing percentages, as in, if I put in 100% height, it seems not to function as I wish it to.

HTML

<!DOCTYPE html>
<html>
	<head>
 
	<link rel = "stylesheet" type = "text/css" href="csscon.css">
 
	<title>My Site</title>
 
	</head>
 
		<body>
		<br />
			<div class = "wrapper">
 
			<div class = "left">
			This div tag should hold text that does not extend outside of the wrapper div. It will be column 1. 50% width
			</div>
			<div class = "right">
			This div tage should hold text that does not extend outside of the wrapper div. It will be column 2. 50% width
			</div>
		<br /><br />
 
 
 
 
			</div>
 
		</body>
</html>

CSS

body {
margin: 0;
padding: 0;
background: #000000;
height: 100%;
}
 
.wrapper {
//position: relative;
border-bottom: 3px #0099cc solid;
border-top: 3px #0099cc solid;
background: #ffffff;
width: 100%;
height: 100%;
}
 
.right {
border: 1px black solid;
width:50%;
height: 100%;
}
.left {
border: 1px black solid;
width: 50%;
}

Thank you kindly in advance.