What I want is: - to position a small 25px - 25px image at the end of a line of text. I'm using a DIV (re1DOC) to position the element to make it a bit easier.
The problem is: once I have it positioned correctly it displays just as i want in IE & Chrome, but when I switch to FireFox, the text has shifted a little and the div is no longer where i wanted it.
- I have validated my htlm & CSS with no issues.
( i know the width, height & background colour attributes are not needed in my CSS, but it helped me set it all up and will be removed befor publishing.)
The HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Restless Earth</title>
<style type="text/css">
body {
margin-left: 0px;
margin-top: 0px;
}
</style>
<link href="CSS/RE.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="REbackground"> </div>
<div id="wordbox"> </div>
<div id="textwrapper">
<p> The position of Earth’s continents has changed over time with some landmasses colliding into one another and others moving apart. This shifting process is known as continental drift.</p>
<div id="world"> <img src="images/gcse images/platemovementIMG.gif" width="400" height="210" alt="plate movement"/></div>
<p> The evidence that supports continental drift includes: the jigsaw-fit of many of the land masses, the geological and fossil finds that are the same in different continents and the scientific measurments taken more recently that prove land masses are moving toward, away and alongside eachother. Continental drift is caused by convectional cell movement in the mantle.The position of Earth’s continents has changed over time with some landmasses colliding into one another and others moving apart. </p>
This shifting process is known as continental drift. The evidence that supports continental drift includes: the jigsaw-fit of many of the land masses, the geological and fossil finds that are the same in different continents and the scientific measurments taken more recently that prove land masses are moving toward, away and alongside eachother. Continental drift is caused by convectional cell movement in the mantle.The position of Earth’s continents has changed over time with some landmasses colliding into one another and others moving apart. This shifting process is known as continental drift. The evidence that supports continental drift includes: the jigsaw-fit of many of the land masses, the geological and fossil finds that are the same in different continents and the scientific measurments taken more recently that prove land masses are moving toward, away and alongside eachother. Continental drift is caused by convectional cell movement in the mantle.The position of Earth’s continents has changed over time with some landmasses colliding into one another and others moving apart. This shifting process is known as continental drift. The evidence that supports continental drift includes: the jigsaw-fit of many of the land masses, the geological and fossil finds that are the same in different continents and the scientific measurments taken more recently that prove land masses are moving toward, away and alongside eachother. Continental drift is caused by convectional cell movement in the mantle.<div id="re1DOC"><img src="images/DOC.png" width="25" height="25" alt="download" />
</div>
</div>
</body>
</html>
The CSS:
#REbackground {
height: 100%;
width: 100%;
min-width: 400px;
background-color: #F33;
position: fixed;
background-attachment: fixed;
background-repeat: no-repeat;
background-size: cover;
color: #F00;
background-image: url(../images/gcse%20images/eruption1.jpg);
}
#textwrapper {
height: 4000px;
width: 1100px;
position: relative;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
padding-top: 10px;
padding-right: 20px;
padding-bottom: 0px;
padding-left: 20px;
background-color: #00F;
}
#world {
float: left;
position: relative;
padding: 5px;
margin-top: 10px;
margin-left: 10px;
margin-right: 10px;
background-color: #F00;;
width: 400px;
height: 210px;
}
#re1DOC {
position: relative;
left: 400px;
bottom: 50px;
background-color: #0F0;
width:25px;
height: 25px;
}
If you want the small 25x25 px image positioned right at the end of the paragraph, then you dont have to position it the way you did. If you check the fiddle # http://jsfiddle.net/8botsnL0/ , all I did was give the < p > paragraph tag to the last paragraph ( which you had not done btw) and before you close the tag (/p) add your image with your anchor tag for linking. you do not need the extra div re1DOC. so your html looks like,
#REbackground {
height: 100%;
width: 100%;
min-width: 400px;
background-color: red;
position: fixed;
background-attachment: fixed;
background-repeat: no-repeat;
background-size: cover;
color: #F00;
/*background-image: url(../images/gcse%20images/eruption1.jpg);*/
}
#textwrapper {
height: 4000px;
width: 1100px;
position: relative;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
padding-top: 10px;
padding-right: 20px;
padding-bottom: 0px;
padding-left: 20px;
background-color: #cecece;
}
#world {
float: left;
position: relative;
padding: 5px;
margin-top: 10px;
margin-left: 10px;
margin-right: 10px;
background-color: #F00;;
width: 400px;
height: 210px;
}
/* remove this not needed as per ur requirement
#re1DOC {
position: relative;
left: 400px;
bottom: 50px;
background-color: #0F0;
width:25px;
height: 25px;
}
*/
<body>
<div id="REbackground"> </div>
<div id="wordbox"> </div>
<div id="textwrapper">
<p> The position of Earth’s continents has changed over time with some landmasses colliding into one another and others moving apart. This shifting process is known as continental drift.</p>
<div id="world"> <img src="images/gcse images/platemovementIMG.gif" width="400" height="210" alt="plate movement"/></div>
<p> The evidence that supports continental drift includes: the jigsaw-fit of many of the land masses, the geological and fossil finds that are the same in different continents and the scientific measurments taken more recently that prove land masses are moving toward, away and alongside eachother. Continental drift is caused by convectional cell movement in the mantle.The position of Earth’s continents has changed over time with some landmasses colliding into one another and others moving apart. </p>
<p> This shifting process is known as continental drift. The evidence that supports continental drift includes: the jigsaw-fit of many of the land masses, the geological and fossil finds that are the same in different continents and the scientific measurments taken more recently that prove land masses are moving toward, away and alongside eachother. Continental drift is caused by convectional cell movement in the mantle.The position of Earth’s continents has changed over time with some landmasses colliding into one another and others moving apart. This shifting process is known as continental drift. The evidence that supports continental drift includes: the jigsaw-fit of many of the land masses, the geological and fossil finds that are the same in different continents and the scientific measurments taken more recently that prove land masses are moving toward, away and alongside eachother. Continental drift is caused by convectional cell movement in the mantle.The position of Earth’s continents has changed over time with some landmasses colliding into one another and others moving apart. This shifting process is known as continental drift. The evidence that supports continental drift includes: the jigsaw-fit of many of the land masses, the geological and fossil finds that are the same in different continents and the scientific measurments taken more recently that prove land masses are moving toward, away and alongside eachother. Continental drift is caused by convectional cell movement in the mantle.<img src="images/DOC.png" width="25" height="25" alt="download" /></p>
</div>
</body>
Related
How do I make the parent div (graybox5) and child div (outlinebox5) heights responsive, so that the gray and outlined boxes always fit nicely around text? See attached screenshot for what it looks like now, you'll see all the extra space in the bottom half of the box (div). I don't want that much additional space, I want the gray box and the outlined box to wrap nicely around the text.
#graybox5 {
width: 100%;
min-height: 375px;
position: relative;
background-color: #F6F6F6;
margin: 20px;
}
#outlinebox5 {
width: 100%;
height: 100%;
position: absolute;
border: 1px solid #252527;
top: -10px;
left: -10px;
z-index: 10;
}
<body>
<div id="graybox5">
<div id="outlinebox5">
<p style="text-align: left; font-weight: 800; margin:20px;">
We were somewhere around Barstow on the edge of the desert when the drugs began to take hold. I remember saying something like I feel a bit lightheaded maybe you should drive. And suddenly there was a terrible roar all around us and the sky was full of what looked like huge bats, all swooping and screeching and diving around the car, which was going about 100 miles an hour with the top down to Las Vegas. And a voice was screaming Holy Jesus! What are these goddamn animals?
</p>
</div>
</div>
</body>
Based on the code given it looks as though the graybox is there just to give the gray background, plus set a minimum height. It doesn't appear to add to the meaning.
Therefore this snippet takes a slightly different approach. It does not use a gray box in the HTML but instead sets part of the background to the div holding the text to gray using a linear-gradient background-image which is calculated by CSS to be slightly less than the full width and height of its element and positioned appropriately.
#outlinebox5 {
width: 100%;
height: 100%;
min-height: 375px;
position: relative;
border: 1px solid #252527;
z-index: 10;
background-image: linear-gradient(#f6f6f6, #F6F6F6);
background-repeat: no-repeat;
background-size: calc(100% - 20px) calc(100% - 20px);
background-position: 10px 10px;
}
<div id="outlinebox5">
<p style="text-align: left; font-weight: 800; margin:20px;">
We were somewhere around Barstow on the edge of the desert when the drugs began to take hold. I remember saying something like I feel a bit lightheaded maybe you should drive. And suddenly there was a terrible roar all around us and the sky was full of
what looked like huge bats, all swooping and screeching and diving around the car, which was going about 100 miles an hour with the top down to Las Vegas. And a voice was screaming Holy Jesus! What are these goddamn animals?
</p>
</div>
Like this?
.graybox {
background-color: #F6F6F6;
margin: 20px;
}
.outlinebox {
border: 1px solid #252527;
transform: translate(-10px, -10px);
}
<body>
<div class="graybox">
<div class="outlinebox">
<p style="text-align: left; font-weight: 800; margin:20px;">
We were somewhere around Barstow on the edge of the desert when the drugs began to take hold. I remember saying something like I feel a bit lightheaded maybe you should drive. And suddenly there was a terrible roar all around us and the sky was full of
what looked like huge bats, all swooping and screeching and diving around the car, which was going about 100 miles an hour with the top down to Las Vegas. And a voice was screaming Holy Jesus! What are these goddamn animals?
</p>
</div>
</div>
</body>
This is my first time here, so please go easy on me. I have been doing coding at university for a couple of months now in one of my modules, and am just finishing off a project and beginning to test it on different browsers. It all runs fairly smoothly apart for one page on Internet Explorer.
On the image below, you'll see that the text that is supposed to go underneath the 'Public Observing' and 'Meetings' section shifts to the edge of the screen and falls off in Internet Explorer.
I've been googling for over an hour now with no luck, I was hoping some of you geniuses will be able to assist me!
Here is some of my HTML and CSS regarding those elements. Thank you very much for shedding any light on this issue!
.observing {
text-align: left;
font-size: 30px;
width: 21%;
padding-bottom: 2%;
}
.observingp {
text-align: left;
font-size: 17px;
width: 40%;
align-content: left;
float: left;
}
.meetings {
text-align: left;
font-size: 30px;
width: 21%;
padding-bottom: 2%;
margin-left: 42.5%;
margin-top: -5%;
}
.meetingsp {
text-align: left;
font-size: 17px;
width: 30%;
align-content: left;
float: left;
margin-left: 3%;
}
<div id="activities-info">
<div id="public-observing">
<h4 class="observing">Public Observing</h4>
<p1 class="observingp">
Public Observing takes place at ‘The New Inn’ at Eccup (LS168AU). Sessions are held regularly during most months, however they stop over Summer when the sunset is too late. Start times vary according to the sunset, and inconsistent dates are due to avoiding
the full moon, which makes observing difficult.
<br><br> Please dress warmly, as observing takes place on an open field. Also, ensure that all children are supervised by a responsible adult. The Society cannot be responsible for accidents on the field.
</p1>
</div>
<div id="meetings">
<h4 class="meetings">Meetings</h4>
<p1 class="meetingsp">
Meetings are held on the second Wednesday of each month at the Quaker Meeting House (LS29DX) between 7pm and 10pm. Meetings usually involve a lecture or presentation of an astronomical topic given by guest speakers or society members. <br><br> Informal
meetings take place two weeks later, on Wednesdays. Here members have an opportunity to express and discuss their interests with personal presentations.
</p1>
</div>
</div>
i recommend to use normalize.css - it is a project to make all borwsers render pages consistently. Just include it as another css befoer your own css file and you will have silmilar results on all browsers.
https://necolas.github.io/normalize.css/
Good Evening,
I have tried and tried to position my text to the right of an image and when the browser is smaller then drops down underneath the image.
Can somebody tell me what I am doing wrong or not doing.
#bandmemberinfo-container {
width: 100%;
background-color: black;
height: auto;
margin-top: 10px;
border: 1px red solid;
color: #fff;
font-family: Arial;
font-size: 10px;
text-transform: uppercase;
}
.bandmemberinfo-container img {
height: 100%;
max-width: 350px;
float: left;
}
<div id="bandmemberinfo-container">
<!-- BAND MEMBER INFO CONTAINER START -->
<img src="http://slade40years.page4.com/nobby_439_752.jpg" class="img-responsive nobbyboulder" />
<p>THE 1970'S HOSTED ONE OF THE MOST FLAMBOYANT DECADES IN THE HISTORY OF POP MUSIC AND ARTISTS SUCH AS SWEET, DAVID BOWIE, WIZZARD, T-REX AND MUD CHAMPIONED THE "GLAM ROCK" MOVEMENT, WHERE PLATFORM BOOTS, SEQUINNED SHIRTS, TWO-TONE FLARED TROUSERS AND
OUTRAGEOUS MAKE-UP, BECAME THE NORM FOR MANY POP BANDS. THE MIGHTY SLADE LED THE GLAM MARCH ACROSS THE UK, INTO EUROPE AND THROUGHOUT THE WORLD. IT IS A PART OF POP HISTORY THAT HAS SHAPED MUSIC CULTURE MANY YEARS LATER AND SLYDE CONTINUE TO KEEP
THE EXCITING ATMOSPHERE OF GLAMROCK ALIVE. THEY ARE THE PERFECT CHOICE FOR ANY 70'S THEMED EVENT WITH AN IMPRESSIVE STAGE SHOW DURING WHICH THEY COVER MANY OF THE CLASSIC HITS OF THAT ERA SLYDE HAVE SUPPORTED ARTISTS SUCH AS THE RUBETTES, BAY CITY
ROLLERS, SMOKIE, BONEY M AND THE LATE ALVIN STARDUST. THEY ARE THE LONGEST RUNNING TRIBUTE TO THE MUSIC OF SLADE AND HAVE PERFORMED WITH THEM AT 70'S WEEKENDERS, UNDER THE NAME OF GLAMROCK UK.</p>
<!-- BAND MEMBER INFO CONTAINER END-->
</div>
You are using a class selector that is not in your HTML
Use:
#bandmemberinfo-container img {
height: 100%;
max-width: 350px;
float: left;
}
or add "bandmemberinfo-container" class not id (http://www.w3schools.com/css/css_syntax.asp ;)
You have two little mistakes:
1.) The selector for the image has to be #bandmemberinfo-container img instead of .bandmemberinfo-container img
2.) Its CSS settings should be like this:
#bandmemberinfo-container img {
width: 100%;
max-width: 350px;
float: left;
}
I.e. 100% width not height) for small screens (below 350px wide), but with a maximum of 350px - then the text will float right of it on larger screens (above 350px).
#bandmemberinfo-container {
width: 100%;
background-color: black;
height: auto;
margin-top: 10px;
border: 1px red solid;
color: #fff;
font-family: Arial;
font-size: 10px;
text-transform: uppercase;
}
#bandmemberinfo-container img {
width: 100%;
max-width: 350px;
float: left;
}
<div id="bandmemberinfo-container">
<!-- BAND MEMBER INFO CONTAINER START -->
<img src="http://slade40years.page4.com/nobby_439_752.jpg" class="img-responsive nobbyboulder" />
<p>THE 1970'S HOSTED ONE OF THE MOST FLAMBOYANT DECADES IN THE HISTORY OF POP MUSIC AND ARTISTS SUCH AS SWEET, DAVID BOWIE, WIZZARD, T-REX AND MUD CHAMPIONED THE "GLAM ROCK" MOVEMENT, WHERE PLATFORM BOOTS, SEQUINNED SHIRTS, TWO-TONE FLARED TROUSERS AND
OUTRAGEOUS MAKE-UP, BECAME THE NORM FOR MANY POP BANDS. THE MIGHTY SLADE LED THE GLAM MARCH ACROSS THE UK, INTO EUROPE AND THROUGHOUT THE WORLD. IT IS A PART OF POP HISTORY THAT HAS SHAPED MUSIC CULTURE MANY YEARS LATER AND SLYDE CONTINUE TO KEEP
THE EXCITING ATMOSPHERE OF GLAMROCK ALIVE. THEY ARE THE PERFECT CHOICE FOR ANY 70'S THEMED EVENT WITH AN IMPRESSIVE STAGE SHOW DURING WHICH THEY COVER MANY OF THE CLASSIC HITS OF THAT ERA SLYDE HAVE SUPPORTED ARTISTS SUCH AS THE RUBETTES, BAY CITY
ROLLERS, SMOKIE, BONEY M AND THE LATE ALVIN STARDUST. THEY ARE THE LONGEST RUNNING TRIBUTE TO THE MUSIC OF SLADE AND HAVE PERFORMED WITH THEM AT 70'S WEEKENDERS, UNDER THE NAME OF GLAMROCK UK.</p>
<!-- BAND MEMBER INFO CONTAINER END-->
</div>
I think for what your desired effect is. You can put the image inside the paragraph tag as the first item before the text starts, then the text will wrap around the image. You can then just add margin to the image to give it extra space between the image and text. And possibly use the image align-attribute
I have added another more heavy html element approach below, to show another method to control a layout. This is using floats and a more responsive approach.
I would also avoid using ID; use class as a rule of thumb. As it is just one less think to think about. And, if you don't care about legacy (IE) browsers then you could consider to use Flexbox. Which will help with different screens and wrapping of images.
.bandmemberinfo-container {
display: inline-flex;
width: 100%;
background-color: black;
height: auto;
margin-top: 1em;
border: 1px red solid;
color: #fff;
font-family: Arial;
font-size: 0.9em;
text-transform: uppercase;
}
.img_wrap {
float: left;
width: 50%;
border: 1px yellow dashed;
}
.img_wrap img {
height: auto;
max-width: 100%;
}
.two {
float: left;
width: 50%;
}
<div class="bandmemberinfo-container">
<div class='img_wrap'><img src="http://slade40years.page4.com/nobby_439_752.jpg" /></div>
<div class='two'>THE 1970'S HOSTED ONE OF THE MOST FLAMBOYANT DECADES IN THE HISTORY OF POP MUSIC AND ARTISTS SUCH AS SWEET, DAVID BOWIE, WIZZARD, T-REX AND MUD CHAMPIONED THE "GLAM ROCK" MOVEMENT, WHERE PLATFORM BOOTS, SEQUINNED SHIRTS, TWO-TONE FLARED TROUSERS AND
OUTRAGEOUS MAKE-UP, BECAME THE NORM FOR MANY POP BANDS. THE MIGHTY SLADE LED THE GLAM MARCH ACROSS THE UK, INTO EUROPE AND THROUGHOUT THE WORLD. IT IS A PART OF POP HISTORY THAT HAS SHAPED MUSIC CULTURE MANY YEARS LATER AND SLYDE CONTINUE TO KEEP
THE EXCITING ATMOSPHERE OF GLAMROCK ALIVE. THEY ARE THE PERFECT CHOICE FOR ANY 70'S THEMED EVENT WITH AN IMPRESSIVE STAGE SHOW DURING WHICH THEY COVER MANY OF THE CLASSIC HITS OF THAT ERA SLYDE HAVE SUPPORTED ARTISTS SUCH AS THE RUBETTES, BAY CITY
ROLLERS, SMOKIE, BONEY M AND THE LATE ALVIN STARDUST. THEY ARE THE LONGEST RUNNING TRIBUTE TO THE MUSIC OF SLADE AND HAVE PERFORMED WITH THEM AT 70'S WEEKENDERS, UNDER THE NAME OF GLAMROCK UK.</p></div>
<!-- BAND MEMBER INFO CONTAINER END-->
</div>
Currently I'm trying to design an index page.
I came across an issue of having two columns being the same height, furthurmore, there is always an extra space on the left, about 5~10px.
Problems:
Columns does not have the same height
Extra space on the left
Solutions I tried:
I tried to set height = 100%, or to a specific amount of px, however, the columns get seperate heights.
I've also tried to remove all the padding and margins, but the left side would always have an extra space, causing the body and the h1 header to "blend" together since they have the same background color.
Code: Jsfiddle
<!DOCTYPE html>
<html>
<head>
<title>Web Based Metrics</title>
<style type="text/css">
body {
width: 100%;
font-family: Arial, Verdana, sans-serif;
color: #665544;
background-color: #74AFAD}
.column1 {
float: left;
width: 21%;
padding: 0px 5px 5px 5px;
margin: 0px 5px 0px 0px;
background-color: #AACECD;
color: #D9853B;}
.column2 {
float: left;
width: 76%;
padding: 0px 0px 5px 5px;
background-color: #ECECEA;
color: #000000;}
h1 {
float:left
position: relative;
padding: 50px 0px 0px 5px;
margin: 0px 0px 0px 0px;
top: 0%;
right: 100%;
left: 0%;
width: 100%;
background-color: #74AFAD;
color: #ffffff;}
h2 {
float:left
position: relative;
padding: 15px 0px 0px 5px;
margin: 0px 0px 5px 0px;
top: 0%;
right: 100%;
left: 0%;
width: 100%;
background-color: #558C89;
color: #ffffff;}
h4 {
color: #ffffff;}
p {
position: relative;
bottom: 100%}
</style>
</head>
<body>
<h1>Web Based Metrics</h1>
<h2>Title 2!</h2>
<div class="column1">
<h4> something </h4>
<p>In 1817 Baron von Drais invented a walking machine that would help him get around the royal gardens faster: two same-size in-line wheels, the front one steerable, mounted in a frame upon which you straddled. The device was propelled by pushing your feet against the ground, thus rolling yourself and the device forward in a sort of gliding walk.</p>
<p>The machine became known as the Draisienne (or "hobby horse"). It was made entirely of wood. This enjoyed a short lived popularity as a fad, not being practical for transportation in any other place than a well maintained pathway such as in a park or garden.</p>
<p>The next appearance of a two-wheeled riding machine was in 1865, when pedals were applied directly to the front wheel. This machine was known as the velocipede (meaning "fast foot") as well as the "bone shaker," since its wooden structure combined with the cobblestone roads of the day made for an extremely uncomfortable ride. They also became a fad and indoor riding academies, similar to roller rinks, could be found in large cities.</p>
<p>In 1870 the first all-metal machine appeared. (Prior to this, metallurgy was not advanced enough to provide metal which was strong enough to make small, light parts out of.) The pedals were attached directly to the front wheel with no freewheeling mechanism. Solid rubber tires and the long spokes of the large front wheel provided a much smoother ride than its predecessor.</p>
<p>The front wheels became larger and larger as makers realized that the larger the wheel, the farther you could travel with one rotation of the pedals. For that reason, you would purchase a wheel as large as your leg length would allow. This machine was the first one to be called a bicycle ("two wheel"). These bicycles enjoyed a great popularity during the 1880s among young men of means. (They cost an average worker six month's pay.)</p>
<p>Because the rider sat so high above the center of gravity, if the front wheel was stopped by a stone or rut in the road, or the sudden emergence of a dog, the entire apparatus rotated forward on its front axle and the rider, with his legs trapped under the handlebars, was dropped unceremoniously on his head. Thus the term "taking a header" came into being.</p>
</div>
<div class="column2">
<p>In 1817 Baron von Drais invented a walking machine that would help him get around the royal gardens faster: two same-size in-line wheels, the front one steerable, mounted in a frame upon which you straddled. The device was propelled by pushing your feet against the ground, thus rolling yourself and the device forward in a sort of gliding walk.</p>
<p>The machine became known as the Draisienne (or "hobby horse"). It was made entirely of wood. This enjoyed a short lived popularity as a fad, not being practical for transportation in any other place than a well maintained pathway such as in a park or garden.</p>
<p>The next appearance of a two-wheeled riding machine was in 1865, when pedals were applied directly to the front wheel. This machine was known as the velocipede (meaning "fast foot") as well as the "bone shaker," since its wooden structure combined with the cobblestone roads of the day made for an extremely uncomfortable ride. They also became a fad and indoor riding academies, similar to roller rinks, could be found in large cities.</p>
<p>In 1870 the first all-metal machine appeared. (Prior to this, metallurgy was not advanced enough to provide metal which was strong enough to make small, light parts out of.) The pedals were attached directly to the front wheel with no freewheeling mechanism. Solid rubber tires and the long spokes of the large front wheel provided a much smoother ride than its predecessor.</p>
<p>The front wheels became larger and larger as makers realized that the larger the wheel, the farther you could travel with one rotation of the pedals. For that reason, you would purchase a wheel as large as your leg length would allow. This machine was the first one to be called a bicycle ("two wheel"). These bicycles enjoyed a great popularity during the 1880s among young men of means. (They cost an average worker six month's pay.)</p>
<p>Because the rider sat so high above the center of gravity, if the front wheel was stopped by a stone or rut in the road, or the sudden emergence of a dog, the entire apparatus rotated forward on its front axle and the rider, with his legs trapped under the handlebars, was dropped unceremoniously on his head. Thus the term "taking a header" came into being.</p>
</div>
</body>
</html>
Firstly:
body{
margin: 0px;
}
Will fix the margin on the ends.
Your columns will never be the same size given you have different amount of text and set different amount of width for both of them.
for deeper understanding see this http://jsfiddle.net/PhilippeVay/sFBGX/2/
simply display div as table cells.
container {display: table;}
child1{display: cell;}
child2 {display: cell;}
Here is solution
1. CSS
.container{
display: table;
table-layout: fixed;
}
body {
width: 100%;
font-family: Arial, Verdana, sans-serif;
color: #665544;
background-color: #74AFAD}
.col {
display: table-cell;
vertical-align: top;}
.column1 {
width: 21%;
padding: 0px 5px 5px 5px;
margin: 0px 5px 0px 0px;
background-color: #AACECD;
color: #D9853B;}
.column2 {
width: 76%;
padding: 0px 0px 5px 5px;
background-color: #ECECEA;
color: #000000;}
h1 {
float:left
position: relative;
padding: 50px 0px 0px 5px;
margin: 0px 0px 0px 0px;
top: 0%;
right: 100%;
left: 0%;
width: 100%;
background-color: #74AFAD;
color: #ffffff;}
h2 {
float:left
position: relative;
padding: 15px 0px 0px 5px;
margin: 0px 0px 5px 0px;
top: 0%;
right: 100%;
left: 0%;
width: 100%;
background-color: #558C89;
color: #ffffff;}
h4 {
color: #ffffff;}
p {
position: relative;
bottom: 100%}
2.HTML
<h1>Web Based Metrics</h1>
<h2>Title 2!</h2>
<div class="container">
<div class="column1 col">
<h4> something </h4>
<p>In 1817 Baron von Drais invented a walking machine that would help him get around the royal gardens faster: two same-size in-line wheels, the front one steerable, mounted in a frame upon which you straddled. The device was propelled by pushing your feet against the ground, thus rolling yourself and the device forward in a sort of gliding walk.</p>
<p>The machine became known as the Draisienne (or "hobby horse"). It was made entirely of wood. This enjoyed a short lived popularity as a fad, not being practical for transportation in any other place than a well maintained pathway such as in a park or garden.</p>
<p>The next appearance of a two-wheeled riding machine was in 1865, when pedals were applied directly to the front wheel. This machine was known as the velocipede (meaning "fast foot") as well as the "bone shaker," since its wooden structure combined with the cobblestone roads of the day made for an extremely uncomfortable ride. They also became a fad and indoor riding academies, similar to roller rinks, could be found in large cities.</p>
<p>In 1870 the first all-metal machine appeared. (Prior to this, metallurgy was not advanced enough to provide metal which was strong enough to make small, light parts out of.) The pedals were attached directly to the front wheel with no freewheeling mechanism. Solid rubber tires and the long spokes of the large front wheel provided a much smoother ride than its predecessor.</p>
<p>The front wheels became larger and larger as makers realized that the larger the wheel, the farther you could travel with one rotation of the pedals. For that reason, you would purchase a wheel as large as your leg length would allow. This machine was the first one to be called a bicycle ("two wheel"). These bicycles enjoyed a great popularity during the 1880s among young men of means. (They cost an average worker six month's pay.)</p>
<p>Because the rider sat so high above the center of gravity, if the front wheel was stopped by a stone or rut in the road, or the sudden emergence of a dog, the entire apparatus rotated forward on its front axle and the rider, with his legs trapped under the handlebars, was dropped unceremoniously on his head. Thus the term "taking a header" came into being.</p>
</div>
<div class="column2 col">
<p>In 1817 Baron von Drais invented a walking machine that would help him get around the royal gardens faster: two same-size in-line wheels, the front one steerable, mounted in a frame upon which you straddled. The device was propelled by pushing your feet against the ground, thus rolling yourself and the device forward in a sort of gliding walk.</p>
<p>The machine became known as the Draisienne (or "hobby horse"). It was made entirely of wood. This enjoyed a short lived popularity as a fad, not being practical for transportation in any other place than a well maintained pathway such as in a park or garden.</p>
<p>The next appearance of a two-wheeled riding machine was in 1865, when pedals were applied directly to the front wheel. This machine was known as the velocipede (meaning "fast foot") as well as the "bone shaker," since its wooden structure combined with the cobblestone roads of the day made for an extremely uncomfortable ride. They also became a fad and indoor riding academies, similar to roller rinks, could be found in large cities.</p>
<p>In 1870 the first all-metal machine appeared. (Prior to this, metallurgy was not advanced enough to provide metal which was strong enough to make small, light parts out of.) The pedals were attached directly to the front wheel with no freewheeling mechanism. Solid rubber tires and the long spokes of the large front wheel provided a much smoother ride than its predecessor.</p>
<p>The front wheels became larger and larger as makers realized that the larger the wheel, the farther you could travel with one rotation of the pedals. For that reason, you would purchase a wheel as large as your leg length would allow. This machine was the first one to be called a bicycle ("two wheel"). These bicycles enjoyed a great popularity during the 1880s among young men of means. (They cost an average worker six month's pay.)</p>
<p>Because the rider sat so high above the center of gravity, if the front wheel was stopped by a stone or rut in the road, or the sudden emergence of a dog, the entire apparatus rotated forward on its front axle and the rider, with his legs trapped under the handlebars, was dropped unceremoniously on his head. Thus the term "taking a header" came into being.</p>
</div>
</div>
I've been researching, but I'm not sure how to look for what I want. I am in my first term of HTML and CSS. My page looks great on my 15 1/2 inch monitor... but when I move it to my 19 1/2 monitor, it adds another part of the background image to the right side, and stretches the menubar across the whole distance. What code am I looking for that will keep the page intact on a wider screen, perhaps adding colored (or blank) borders on each side? Thank you for your help.
Thank you to Brad and Fiddle for helping. The no-repeat helped the background, however, on the bigger monitor, my menubar wants to go clear across, and the .box and img.posit want to stick to the far left side. I'd rather they stay measured according to the background image.
thes style sheet:
body {font-family:Arial, Verdana, Garamond;
background-image: beach.jpg; background-repeat: no-repeat; background-position: center;}
a {text-decoration: none;
color: #FF4D10; font-size: 14pt;}
a:hover {background-color: white;}
.menu {position:center;
text-align: center;
width: 100%; margin: 0; text-decoration: none;}
.menuword {width: 10%; background-color: beach.jpg; font-weight: 500; text-decoration: none;}
.menuwordselect {width: 10%; font-weight: bolder; font-style: italic; text-decoration: none;}
.menupipe {width: 0%; font-weight: bolder;}
.box {width: 400px; margin-left: 25px; margin-top: 100px; border-radius: 7px; background-color: #ffff9c; padding: 10px; color: #303032;}
/* set styles for class named box to position the image */
img.posit {position: relative; left: 550px; top: -435px }
/* sets styles for class named posit to position the image */
I really appreciate your help :)
Brad... here is the code for the page...
<body background="beach.jpg">
<div style="text-align: center;">
<img src="Oahu banner.jpg" width="995" height="295">
<table class="menu">
<tr>
<td class="menuword">Waikiki</td>
<td class="menupipe">|</td>
<td class="menuword">North Shore</td>
<td class="menupipe">|</td>
<td class="menuword">Cultural and Historical</td>
<td class="menupipe">|</td>
<td class="menuword">Best Deal Ever</td>
<td class="menupipe">|</td>
<td class="menuword">More Info</td>
<td class="menupipe">|</td>
<td class="menuword">Site Map</td>
</tr>
</table>
</div>
<div>
<p class="box">Oahu known as "The Gathering Place", is the third largest of the Hawaiian Islands and home to more than 950,000 people, almost 75% of the U.S. state of Hawaii's population. The state capital, Honolulu, is on Oahu's southeast coast. In the greatest dimension, this volcanic island is 44 miles (71 km) long and 30 miles (48 km) across. The length of the shoreline is 227 miles (365 km). The island is the result of two separate shield volcanoes: Wai'anae and Ko'olau, with a broad "valley" or saddle, the Oahu Plain between them. The highest point is Mt. Ka'ala in the Wai'anae Range, rising to 4,003 feet (1,220 m) above sea level.
<br><br>
But there is more to Oahu than just height and width. Honolulu, the state's capital, not only displays an impressive skyline of highrises, but also the beautiful beach of Waikiki, where Duke Kahanamoku "the father of surfing" developed his surfing and swimming skills.
<br><br>Across the pineapple fields at the middle of the island, the North Shore is home to modern day world renown surfing competitions, prolific fruit plantations and a quiet, rural lifestyle for many residents.
<br><br>The cultural heritage of the native peoples is richly preserved in many world class museums, libraries and attractions. Pearl Harbor as an important piece of our American history is a must see stop for all visitors.
<br><br>There is something for everyone on this beautiful tropical island. Come vist and Hang Loose in Oahu!</p>
<img class="posit" src="waterfallbig.jpg" width="513" height="386" alt="Waterfall" />
</div>
</body>
You need background-repeat: no-repeat since background images by default repeat both vertically and horizontally.
For the second part of your question, it sounds like you want background-position: center. This will center the image both vertically and horizontally, leaving space around the image. Optionally, you can set the background-color to whatever you want.
CSS
background: url("http://placehold.it/300x18") no-repeat center (whatever color you want);
JSFiddle
You may also try this, it would position the whole page in centre, irrelevant to size of screen
*{
margin:1px auto;
}