1 reply [Last post]
Xen
Xen's picture
Offline
newbie
Last seen: 5 years 19 hours ago
Timezone: GMT-4
Joined: 2014-10-14
Posts: 1
Points: 2

I have a project that is slightly over my head so after working on it for a day I don't feel too bad about asking for help. Most of what I need to do is complete but I can't figure out why I can't get my col flush with my header or how to get 25px of padding on col1 without pushing col2 underneath col1. The other part I need to do is to make my collapse button extend col1 overtop of col2 but I know that's javascript. Take a look and see if you can give a novice a hand. I put everything in-line so you can see what's going on.

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>RusnakM</title>
<style type="text/css">
html, body {
    height:100%;
    width:100%;
}
#container {
width:100%;
background:#9cc;
}
#header {
background:#d34;
}
#column1 {
float:left;
width:75%;
 
background:#9c9;
}
.button {
    display: block;
    height: 100px;
    width: 300px;
    background: #34696f;
    border: 2px solid rgba(33, 68, 72, 0.59);
    /*Step 3: Text Styles*/
    color: rgba(0, 0, 0, 0.55);
    text-align: center;
    font: bold 3.2em/100px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
    /*Step 4: Fancy CSS3 Styles*/
    background: -webkit-linear-gradient(top, #34696f, #2f5f63);
    background: -moz-linear-gradient(top, #34696f, #2f5f63);
    background: -o-linear-gradient(top, #34696f, #2f5f63);
    background: -ms-linear-gradient(top, #34696f, #2f5f63);
    background: linear-gradient(top, #34696f, #2f5f63);
    -webkit-border-radius: 50px;
    -khtml-border-radius: 50px;
    -moz-border-radius: 50px;
    border-radius: 50px;
    -webkit-box-shadow: 0 8px 0 #1b383b;
    -moz-box-shadow: 0 8px 0 #1b383b;
    box-shadow: 0 8px 0 #1b383b;
    text-shadow: 0 2px 2px rgba(255, 255, 255, 0.2);
}
/*Step 3: Link Styles*/
a.button2 {
    text-decoration: none;
}
/*Step 5: Hover Styles*/
a.button:hover {
    background: #3d7a80;
    background: -webkit-linear-gradient(top, #3d7a80, #2f5f63);
    background: -moz-linear-gradient(top, #3d7a80, #2f5f63);
    background: -o-linear-gradient(top, #3d7a80, #2f5f63);
    background: -ms-linear-gradient(top, #3d7a80, #2f5f63);
    background: linear-gradient(top, #3d7a80, #2f5f63);
}
#sidebar {
float:right;
margin:auto;
width:25%;
background:#c9c;
}
#footer {
clear:both;
height:80px;
background:#cc9;
}
</style>
<body>
<div id="container">
<div id="header"><h1>RusnakM</h1></div>
<div id="column1">
  <h2>Column 1</h2>
  <a href="http://designshack.net/" class="button">Collapse</a>
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
</div>
<div id="sidebar">
<h2>Column 2</h2>
</div>
<div id="footer">
<h2>Footer</h2>
</div>
</div>
</body>
</html>

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 14 hours 44 min ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5342
Points: 2963

Hi Xen, This old hack might

Hi Xen,
This old hack might help fix part of your problem.

html, body {
padding:0;
margin:0;
}