I am trying to vertically center a border around the 'about' div class containing the 3 paragraphs. The border is too high, I want to move it down to vertically center it. I can adjust the height but I can't move the border down at all.
<div class='about'>
<p>
JavaScript (/ˈdʒɑːvəˌskrɪpt/[5]) is a high-level, dynamic, untyped, and interpreted programming language.
</p>
<br>
<p>
Despite some naming, syntactic, and standard library similarities, JavaScript and Java are otherwise unrelated and have very different semantics.
</p>
<br>
<p>
JavaScript is also used in environments that are not web-based, such as PDF documents, site-specific browsers, and desktop widgets.
</p>
<br>
</div>
Here is the CSS
.about {
width: 500px;
text-align: center;
margin: auto;
padding-top: 50px;
border-right: 1px solid white;
border-left: 1px solid white;
padding-right: 15px;
padding-left: 15px;
height: 200px;
}
It is difficult to visualize what I need without looking at the complete code on jsfiddle: https://jsfiddle.net/njh5scyd/
Please help! Been trying to figure this out...
Thank you
You should do this with :after and :before pseudo-elements:
/*main.css*/
html, body, h1, h2, h3, h4, div, p, ul, ol, li {
padding: 0;
border: 0;
margin: 0;
font: inherit;
font-size: 100%;
font-family: 'Helvetica Neue', 'Helvetica', 'sans-serif';
color: white;
background-color: black;
}
h1 {
font-size: 70px;
font-weight: bold;
text-align: center;
}
h2 {
font-size: 22px;
font-weight: 200;
text-align: center;
border-bottom: 1px solid white;
padding-bottom: 10px;
}
h2 strong {
font-weight: 500;
}
.tagline {
padding: 15px 0 25px 0;
width: 700px;
margin: 0 auto;
}
.links ul li {
display: inline;
padding: 20px;
font-weight: bold;
}
.links {
text-align: center;
}
.links a {
text-decoration: none;
color: white;
text-decoration: underline;
}
.about {
width: 500px;
text-align: center;
margin: auto;
padding-top: 50px;
padding-right: 15px;
padding-left: 15px;
position: relative;
}
.about:before {
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
height: 50%;
border-left: 1px solid white;
content: '';
}
.about:before {
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
height: 50%;
border-right: 1px solid white;
content: '';
}
<body>
<div class='header'>
<h1>Daffy Duck</h1>
</div>
<div class='tagline'>
<h2>fdsfsdfsdfsdfds <strong>fewfwefwef</strong> fdsfdsfsdf <strong>sdfdfsf</strong></h2>
</div>
<div class='links'>
<ul>
<li><a href='file:///Users/Frank/Desktop/moee.html' target='_self'>Home</a></li>
<li><a href='file:///Users/Frank/Desktop/javascrip.html' target='_self'>Portfolio</a></li>
<li>Resume</li>
<li><a href='file:///Users/Frank/Desktop/game.html' target='_self'>About</a></li>
<li>Why Me</li>
</ul>
</div>
<div class='about'>
<p>
JavaScript (/ˈdʒɑːvəˌskrɪpt/[5]) is a high-level, dynamic, untyped, and interpreted programming language.[6] It has been standardized in the ECMAScript language specification.[7] Alongside HTML and CSS, it is one of the three essential technologies of World Wide Web content production; the majority of websites employ it and it is supported by all modern web browsers without plug-ins.
</p>
<br>
<p>
Despite some naming, syntactic, and standard library similarities, JavaScript and Java are otherwise unrelated and have very different semantics. The syntax of JavaScript is actually derived from C, while the semantics and design are influenced by the Self and Scheme programming languages.
</p>
<br>
<p>
JavaScript is also used in environments that are not web-based, such as PDF documents, site-specific browsers, and desktop widgets. Newer and faster JavaScript virtual machines (VMs) and platforms built upon them have also increased the popularity of JavaScript for server-side web applications.
</p>
<br>
</div>
</body>
You have a fixed height of 200px on your .about element. Unless you have a definite purpose for it, you should remove it. If you do that your .about element will extend naturally and wrap around the content inside it properly.
That will naturally affect your border, which is directly tied to your .about element. The height of your .about has a direct relationship with your border, which surrounds the .about element. Smaller height than the content? Smaller height of the border as well.
Let me know if you have any questions or need anything further from this point on.
html {
background-color: black; /* added for testing purposes only */
}
.about {
color: white; /* added for testing purposes only */
width: 500px;
text-align: center;
margin: auto;
padding-top: 50px;
border-right: 1px solid white;
border-left: 1px solid white;
padding-right: 15px;
padding-left: 15px;
}
<div class='about'>
<p>
JavaScript (/ˈdʒɑːvəˌskrɪpt/[5]) is a high-level, dynamic, untyped, and interpreted programming language.
</p>
<br>
<p>
Despite some naming, syntactic, and standard library similarities, JavaScript and Java are otherwise unrelated and have very different semantics.
</p>
<br>
<p>
JavaScript is also used in environments that are not web-based, such as PDF documents, site-specific browsers, and desktop widgets.
</p>
<br>
</div>
you can just draw the borders on <p> and drop these <br> : https://jsfiddle.net/njh5scyd/3/
.about {
width: 500px;
text-align: center;
margin: auto;
padding-top: 50px;
}
.about p {
border-right: 1px solid white;
border-left: 1px solid white;
padding: 15px;
margin:0;
}
background-image/background-size can help to tune this as well : https://jsfiddle.net/njh5scyd/4/
.about {
width: 500px;
text-align: center;
margin: auto;
padding-top: 50px;
padding-right: 15px;
padding-left: 15px;
background:
linear-gradient(to bottom, white, white) center right no-repeat,
linear-gradient(to bottom, white,white) center left no-repeat;
background-size: 1px 60% ;
}
It's simple. just change .about's style like below:
.about {
width: 500px;
text-align: center;
margin: auto;
padding-top: 50px;
/*border-right: 1px solid white;
border-left: 1px solid white;*/
padding-right: 15px;
padding-left: 15px;
/*height: 200px;*/
position:relative;
}
Then put new styles below.
.about::before,.about::after{
content:" ";
width:1px;
height:200px;
top:calc(50% - 100px);
left:0;
position:absolute;
background:#FFFFFF;
}
.about::after{
right:0;
left:initial;
}
Check my live demo on jsfiddle
Related
I'm trying to fix my website. Problem #1 I can't push the list on the header over by using margin-left or padding-left. Problem #2 the Main Header 1 and 3 are creating there own padding. My goal is to fix the padding and bring the headers closer together and get rid of this padding/margin issue.
#hlist {
top: 10px;
margin-right: 3px;
position: relative;
height: 30px;
padding-right: -12px;
}
ul#hlist {
float: right;
list-style-type: none;
margin: 0;
overflow: hidden;
}
ul#hlist li {
float: left;
}
ul#hlist li a {
font-family: 'Poppins';
color: black;
text-align: center;
text-decoration: none;
padding: 14px 16px;
}
ul#hlist li a:hover {
border-style: solid;
border-width: 1px;
border-color: gray;
color: gray;
}
.content-wrapper {
padding: 0;
}
.text-wrapper {
height: 300px;
width: 100%;
position: relative;
margin-top: -60%;
}
.text-wrapper h1 {
text-shadow: 2px 2px black;
text-align: center;
color: #ffff;
font-size: 10vw;
}
.text-wrapper h3 {
margin-top: 10%;
text-shadow: 2px 2px black;
text-align: center;
color: #ffff;
font-size: 30px;
}
<div id="header">
<ul id="hlist">
<li>WHERE TO WATCH</li>
<li>ABOUT</li>
</ul>
<div id="logo-box">
<img style="height: 32px; padding:5px;" src="https://assets.nationalgeographic.com/styleguide/stable/logos/ng-logo-2fl.svg" alt="logo">
</div>
</div>
</header>
<div class="content-wrapper">
<image id="bg" src="https://i.imgur.com/i2MSrn7.jpg">
<div class="text-wrapper">
<h3> The Giant </h3>
<h1> Panda </h1>
</div>
<image id="ply" style="height: 32px; padding:5px;" src="images.svg">
</div>
Your body has margin: 8px set. That's why there's a gap around the edges. Set margin: 0 on the body tag. Check out this codepen I created. That solves the gap around the edges of the image.
I don't fully understand the second part of your question. Your page is spread out very wide due to the size of the image. Make the image smaller and so that it doesn't overflow and your site will look much better.
If you want to position the links in an easier way look into using Flexbox and doing something like this:
display: flex;
justify-content: flex-end;
Do that on your links and they should float right if that's what you're trying to do.
Also, look into using a CSS Reset. By default HTML elements come with certain CSS styles applied automatically. A reset will get rid of default styles so they don't interfere with what you're trying to do. Lots of HTML elements have default padding/margins that you may not realize.
I'm working on a little design for a site that's comprised of the main content being in a square roughly 80% the width of the site, and then a header, footer and two sidebars being signalled via lines. I have the header, footer, lines and content all working, and they all (mostly) stay in the right place when resized. However, I can't for the life of me work out how to get the square in the center to continue to fill the section in the middle of the screen (without overlapping, or having a scroll bar!)
I've attached the code for my square and some screenshots of what I'm attempting to do and what currently happens below. Other than my innercontent div, there're no divs on the side, and a header and footer div above and below.
*Update: Added code as requested. I believe this is all that's used in the example I provided in the screenshots, other than the lines, which are produced via some JS. I've included the important css here too, so to allow me to link to my JS Fiddle with it all:
/* ===================
Inital Styles
=================== */
html {
color: #fff;
font-size: 1em;
background: #3f51b5;
line-height: 1.4;
animation: fade 5s
}
::-moz-selection {
background: #6534ff;
text-shadow: none;
}
::selection {
background: #3f51b5;
text-shadow: none;
}
hr {
display: block;
height: 1px;
border: 0;
border-top: 1px solid #ccc;
margin: 1em 0;
padding: 0;
}
audio,
canvas,
iframe,
img,
svg,
video {
vertical-align: middle;
}
fieldset {
border: 0;
margin: 0;
padding: 0;
}
textarea {
resize: vertical;
}
.browserupgrade {
margin: 0.2em 0;
background: #ccc;
color: #000;
padding: 0.2em 0;
}
body {
font: 16px/26px Helvetica, Helvetica Neue, Arial;
}
h1,
h2,
h3,
h4 {
color: #fff;
font-family: 'Montserrat', sans-serif;
line-height: normal;
}
h1 {
font-size: 25px;
letter-spacing: 3.1;
}
h2 {
font-size: 14px;
font-weight: 500;
text-align: justify;
}
h3 {
font-family: 'Space Mono', monospace;
font-weight: 400;
}
h4 {
font-size: 19px;
}
.inline {
display: inline;
}
.clear {
clear: both;
display: block;
content: "";
}
.center {
margin: auto;
width: 50%;
padding: 10px;
}
.header-container {
height: 145px;
position: relative;
}
.header-center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.title {
color: white;
text-align: center;
font-size: 40px;
font-family: 'Space Mono', monospace;
font-weight: 400;
line-height: 0px;
margin-top: 35px;
}
.subTitle {
color: white;
text-align: center;
font-size: 14px;
font-family: 'Space Mono', monospace;
font-weight: 400;
font-style: italic;
}
.innercontent {
position: relative;
height: 3vw;
width: 80%;
margin: auto;
padding-top: 32.5vw;
margin-top: -28px;
margin-left: 10.0%;
}
.green {
background: #42ab9e;
}
/* ===================
Name Collection
=================== */
#nameCollection {
text-align: center;
}
#nameText {
margin-top: -28%;
margin-left: 15%;
position: absolute;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
}
.nameSkipButton {
margin-top: 25px;
background-size: 210% 100%;
background-image: linear-gradient(to right, #963019 50%, #16174f 50%);
-webkit-transition: background-position 0.3s;
-moz-transition: background-position 0.3s;
transition: background-position 0.3s;
border: none;
font-family: 'Space Mono', monospace;
color: #fff;
padding: 10px;
font-size: 12px;
}
.nameSkipButton:hover {
background-position: 99%, 0;
}
<body>
<div class="delay">
<div class="fade-in delay">
<div class="header-container">
<header class="header-center">
<h1 class="title" onclick="location.reload();" style="cursor: pointer;">COMPUTERIFY.IO</h1>
<p class="subTitle" onclick="location.reload();" style="cursor: pointer;">Alpha is just a fancy word for unfinished.</p>
<p class="subTitle">
</h1>
</header>
</div>
<div class="main-container">
<div id="content" class="innercontent green">
<div id="nameCollection">
<div id="nameText">
<h3>Hello. I'm the PC Generator, or PCG for short. Before we get started, can I just ask...</h3>
<h1>What's your first name?</h1>
<div>
<input type="button" style="display:none" id="btnSearch" value="Search" onclick="getUserName()" />
<span class="input input--nameCollection">
<input class="input__field input__field--nameCollection" maxlength="19" onkeydown = "if (event.keyCode == 13) document.getElementById('btnSearch').click()" type="text" id="input-25" />
<label class="input__label input__label--nameCollection" for="input-25">
<span class="input__label-content input__label-content--nameCollection">First Name</span>
</label>
</span>
</div>
<input class="nameSkipButton" id="skipName" type="button" value="I don't value my name, pick one for me" onclick="confirmSkip();" />
</div>
</div>
</div>
</div>
</div>
https://jsfiddle.net/nxyg4a9x/2/
Attached screenshots demonstrating the design when it works (on a 1920x1080 display, and how it looks on resize and on mobile.
I would use flexbox if you can.
The following is a demo and you'll likely need to make adjustments to fit your needs.
* {
box-sizing: border-box;
}
body {
display: flex;
flex-direction: column;
margin: 0;
min-height: 100vh;
overflow: hidden;
background-color: #3f51b5;
}
header,
main,
footer {
margin: 0 10%; // Indirect way of making element width: 80%;
border-left: 2px solid lightgray;
border-right: 2px solid lightgray;
}
header,
footer {
flex-basis: 100px;
}
main {
position: relative;
flex-grow: 1;
background-color: #42ab9e;
}
main:before {
content: '';
z-index: -1;
position: absolute;
top: -2px;
right: -100%;
bottom: -2px;
left: -100%;
display: block;
border-top: 2px solid lightgray;
border-bottom: 2px solid lightgray;
}
<header></header>
<main></main>
<footer></footer>
The most important thing that we did is use flex-grow: 1 on main which addresses your primary concern of stretching your content area to fill the appropriate space. flex-grow: 1 tells the element to take up any remaining space inside of it's parent element. So whatever space is left over from the height of the header and footer it will file up.
We use min-height on body as a starting point so that main doesn't end up a fixed size (which is what would have happened if we used height instead) and the layout fills the viewport initially even if there is not a lot of content.
You mentioned using JS to create your lines, that seems like overkill to me and can be accomplished with CSS. The lines are just borders and the only non obvious set of lines would be the horizontal lines that extend outside of main. I did this with a pseudo element that stretches itself outside of it's parent element. The top and bottom of the pseudo element are pulled outside of it's containing element equal to the border's thickness. The left and right of the pseudo element are pulled out just wide enough to always extend a little past the viewport window (I used a relative unit so it will grow with the viewport). We used overflow: hidden; on body to prevent a horizontal scrollbar that this element initially creates.
Hope this works for you and let me know if you have any questions, cheers!
In your .innercontent div, you are using the vw measurement which stands for "viewport width" - basically what this means is that the height of your box is going to be relative to the width of the screen/viewport that the user is viewing the site in.
You need to set height, width margin etc in another unit other than vw since it will result in what you're seeing. I forked your fiddle to demonstrate.
https://jsfiddle.net/550n5wgn/1/
I'd like to make a message-alert box in my web app. I created the main style but I have problems on small screen sizes.
Here's the image for the regular 1366x768 computer screen:
And here is for a typical mobile device:
Problems:
The X button has tagled with the message.
The main message wrapper has fixed and wasn't expand when the message came out of the wrapper.
How to fix the two above problems? Do I have to follow another path? I use position: fixed; property-value to keep my message on top.
Here are my HTMl and CSS code:
HTML:
<div class="top-msg">
<div class="top-msg-ico">
!
</div>
<div class="top-msg-inner">
<p>Only letters and nubers are allowed for email. See security for more info.</p>
</div>
<div class="top-msg-close" style=" cursor: pointer;">✕</div>
</div>
CSS:
.top-msg {
width: 100%;
height: 55px;
position: fixed;
background-color: rgba(42,45,50,0.6);
color: rgba(250,251,255,0.95);
font-family: "Lato", sans-serif;
font-size: 18px;
}
.top-msg-close {
float: right;
padding-top: 17px;
padding-right: 30px;
//border: 1px solid white;
//height: 100%;
width: 3%;
}
.top-msg-inner {
top: 15px;
position: absolute;
display: inline-block;
padding-left: 10px;
width: 80%;
//border: 1px solid white;
}
.top-msg-ico {
min-width: 65px;
height: 100%;
background-color: #fff;
display: inline-block;
background-color: rgba(0,0,0,0.7);
text-align: center;
font-size: 45px;
}
FIDDLE:
https://jsfiddle.net/4oLvyajo/
UPDATE -SOLUTION!-
After some help from LGSon answer I manage to finish all the design, so I accepts his answer but the hole solution is in the fiddle below.
FIDDLE:
https://jsfiddle.net/4oLvyajo/4/
Images:
Here is a start for you
.top-msg {
width: 100%;
position: fixed;
background-color: rgba(42,45,50,0.6);
color: rgba(250,251,255,0.95);
font-family: "Lato", sans-serif;
font-size: 18px;
}
.top-msg-close {
float: left;
box-sizing: border-box;
padding-top: 17px;
padding-right: 30px;
width: 45px;
}
.top-msg-inner a {
text-decoration: none;
color: RGBA(0, 0, 0, 0.6);
font-weight: bold;
}
.top-msg-inner a:hover {
color: RGBA(0, 0, 0, 0.5);
}
.top-msg-inner {
float: left;
box-sizing: border-box;
padding: 0 10px;
width: calc(100% - 110px);
}
.top-msg-ico {
float: left;
width: 65px;
height: 57px;
background-color: #fff;
background-color: rgba(0,0,0,0.7);
text-align: center;
font-size: 45px;
}
<div class="top-msg">
<div class="top-msg-ico">
!
</div>
<div class="top-msg-inner">
<p>Only letters and nubers are allowed for email. See security for more info.</p>
</div>
<div class="top-msg-close" style="cursor: pointer;">✕</div>
</div>
replace the width: 80% with margin-right: 40px, and you'll have to play around with the top: 15px as well (at -11 I had it looking right, but you can play around with that)
Here is the updated Fiddle
If you want everything scalable you'll need a completely different approach. First of all, if you place a right floating element under a block element it will float right, but underneath it. You'll need to define the floating close button element first.
Anyway, here's the updated Fiddle
It needs some minor tweaks in the padding and margins, but I think this is very close to what you're looking for
Can anyone please let me know why the following code produces white space between the div "content-main', and the two introduction divs, which sit above the main content?
.header {
width: inherit;
background-color: #58614E;
height: 8em;
position: relative;
z-index: 2;
}
.header-logo {
float: left;
display: inline-block;
}
#header-home-link {
color: white;
font-weight: bold;
margin-left: 3em;
position: relative;
top: 1em;
}
.header a:link {
color: #C5EBF9;
position: relative;
top: 1em;
padding-left: 1em;
}
.introduction-left {
background-color: #EEEEEE;
width: 55%;
padding-bottom: 1em;
padding-right: 1.0em;
padding-top: 1em;
border-right-style: dotted;
border-right-width: 1px;
float: left;
overflow: auto;
}
.introduction-left h2 {
color: #57614E;
padding-left: 13em;
}
.introduction-left p {
color: #626262;
padding-left: 2.0em;
z-index: 2;
}
.introduction-right {
background-color: #EEEEEE;
width: 40%;
float: right;
z-index: 0;
padding-right: 3.3em;
padding-top: 2em;
padding-bottom: 3.7em;
}
.introduction-right h2 {
color: #57614E;
font-style: italic;
position: relative;
left: 3em;
bottom: 0.5em;
margin: 0;
}
.introduction-right p {
padding-left: 1em;
color: #57614E;
}
.content-main {
background-color: #E2E2E2;
border-style: solid;
border-width: 1em;
border-color: white;
width: 100%;
overflow: auto;
}
.content-main h3 {
color: #728063;
font-style: italic;
padding-left: 15em;
}
<div class="header">
</div>
<div class="introduction-left">
<h2>Today's News</h2>
<p>This website template has been designed by Free Website Templates for you, for free. You can replace all this text with your own text. You can remove any link to our website from this website template, you're free to use this website template without
linking back to us. If you're having problems editing this website template, then don't hesitate to ask for help on the Forums.</p>
</div>
<div class="introduction-right">
<h2>Testimonials</h2>
<p>"You can remove any link to our website from this website template, you're free to use this website template without linking back to us.”
</p>
</div>
<div class="content-main">
<h3>Main Articles.</h3>
</div>
I think because,you use
.content-main{
border-style: solid;
border-width: 1em;
Try to use
.content-main{
background-color: #E2E2E2;
border-style: none;
width: 100%;
overflow:auto;
In your css, I see (last Chrome in Linux)
when I use border-style: none, I get (second div with main-context without space):
It's what you want?
Quick answer - not necessarily right:
Try removing all padding statements in CSS temporarily and see how it looks...
Then add them back in as desired.
The spaces between your elements are causing the white space to appear. Put in some sort of wrapper and give it font-size: 0, then give the divs with text a font-size: initial, or if you care about making it IE compatible give it font-size: 16px or whatever, since font-size: initial doesn't work on IE.
I've been meaning to replace the tables in my site with css positioning and have been trying to teach myself through tutorials etc. I've had some early success but it all came crashing down when I tried to create a sidebar. I'm hoping the problem has some kind of simple solution. The relative/absolute positioning of the elements is not going anywhere close to what I wanted to do. My goal is to have a sidebar with images that stack (float?) from top to bottom, with the middle elements being part of an unordered list. I got it to work once but now that stack on top of each other. It has to be the way I am setting the float and the absolute/relative positioning. After reading some articles here I tried adding a div wrapper to put them inside but I think I got myself even more confused. Is it possible someone could nudge me in the right direction? Here is the code:
CSS
body
{
background: #b6b7bc;
font-size: .80em;
font-family: "Helvetica Neue", "Lucida Grande", "Segoe UI", Arial, Helvetica, Verdana, sans-serif;
margin: 50px;
padding: 0px;
color: #696969;
height: 160px;
}
a:link, a:visited
{
color: #034af3;
}
a:hover
{
color: #1d60ff;
text-decoration: none;
}
a:active
{
color: #034af3;
}
p
{
margin-bottom: 10px;
line-height: 1.6em;
}
/* HEADINGS ----------------------------------------------------------*/
h1, h2, h3, h4, h5, h6
{
font-size: 1.5em;
color: #666666;
font-variant: small-caps;
text-transform: none;
font-weight: 200;
margin-bottom: 0px;
}
h1
{
font-size: 1.6em;
padding-bottom: 0px;
margin-bottom: 0px;
}
h2
{
font-size: 1.5em;
font-weight: 600;
}
h3
{
font-size: 1.2em;
}
h4
{
font-size: 1.1em;
}
h5, h6
{
font-size: 1em;
}
/* PRIMARY LAYOUT ELEMENTS ---------------------------------------------------------*/
.page
{
width: 960px;
background-color: #fff;
margin: 20px auto 0px auto;
border: 1px solid #496077;
}
.header
{
position: relative;
margin: 0px;
padding: 0px;
background: #4b6c9e;
width: 100%;
top: 0px;
left: 0px;
}
.header h1
{
font-weight: 700;
margin: 0px;
padding: 0px 0px 0px 20px;
color: #f9f9f9;
border: none;
line-height: 2em;
font-size: 2em;
}
.main
{
padding: 0px 12px;
margin: 0px 4px 4px 4px;
min-height: 420px;
width: 500px;
float: left;
}
.leftCol
{
padding: 6px 0px;
margin: 12px 8px 8px 8px;
width: 200px;
min-height: 200px;
}
.footer
{
color: #4e5766;
padding: 8px 0px 0px 0px;
margin: 0px auto;
text-align: center;
line-height: normal;
}
/* MISC ----------------------------------------------------------*/
.clear
{
clear: both;
width: 936px;
height: 35px;
}
.title
{
display: block;
float: left;
text-align: justify;
}
.bold
{
font-weight: bold;
}
p.clear
{
clear: both;
height: 0;
margin: 0;
padding: 0;
}
#wrapper
{
position:relative;
height: 500px;
width: 900px;
}
#insidemain
{
position:absolute;
float: left;
width: 500px;
height 180px;
}
/* ---------------- Sidebar Items ---------------------*/
#sidebar /* Sidebar container */
{
position:absolute;
border-top: 1px solid #99CC33;
border-left: 1px solid #99CC33;
height: 300px;
width: 180px;
margin-right: 5px;
padding: 5px 0 0 5px;
}
#sidebarHeader
{
position:absolute;
height: 37px;
width: 172px;
float: left;
background-image: url(../img/TopMenu.jpg);
background-repeat:no-repeat;
}
#sidebarItems ul
{
position:absolute;
height: 27px;
width: 172px;
float:left;
background-image: url(../img/MenuItems.jpg);
background-repeat:no-repeat;
/*left: 6px;
top: 45px;*/
background-position: 0px -27px;
}
#sidebarFooter
{
position:absolute;
height: 46px;
width: 172px;
float:left;
background-image: url(../img/BottomMenu.jpg);
background-repeat:no-repeat;
}
And the HTML:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title></title>
<link href="Styles/Simple.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="page">
<div class="header">header
<div class="title">
<h1>
Test Page
</h1>
</div>
</div>
<p class = "clear">clear</p>
<div id="wrapper">
<div id="sidebar">
<div id="sidebarHeader">
</div>
<div id="sidebarItems">
<ul>
<li>test item</li>
</ul>
</div>
<div id="sidebarFooter">
</div>
</div>
</div>
<div id="insidemain">
main
</div>
</div>
<div class="clear">clear</div>
<div class="footer">
<a href="http://www.google.com/">
Blah blah test to see how far this will go across the page blah blha lorem ipsum and various other stuff that is meaningless etc
</a>
</div>
</body>
</html>
Typically (for non-responsive sites especially), you'd have your .wrapper div around the entire content (header, content, sidebar, footer, etc). Then set your .wrappers width. Your .sidebar would have a set width and it would either float: left; or float: right; depending on the side you want it on. Set your .content div's width which would be less than or equal to your .wrapper width - your .sidebar width. Then add your .clearfix below so the .footer falls beneath everything. In most cases (at least for the large page chunks) you can avoid position:absolute; which helps make things more easily fall into place.
You really shouldn't have to float your div's or list. Those are block elements by default and will stack vertically regardless.
Also, as Scrimothy mentioned, you do not want absolutely positioned elements as that will take the element out of the page flow. In other words, they no longer take up "real" space in the page, and instead render at whatever coordinates you position them.
Similarly, floats also take up no space, except with other floated elements. That's why some UI developers will float almost every element on the page and "clear" them using a footer or at key breaks in the page. I personally don't recommend positioning in that fashion, but to each his own.
See if this quick tutorial helps you with some key positioning concepts: HERE
Don't target the same element with both float and position:absolute. It doesn't make much sense. Anywhere where you have float, you should get rid of position:absolute
Next, get rid of those silly class="clear" elements. Instead, target .footer with clear:both and .page with overflow-y:hidden;