I'm struggling to display two div elements correctly right next to each other and I'm not sure what would be the best way to go about this.
Here you can see what it looks like live
And this would be the code:
This is the first element shown in the picture, the second div has this exact same code, only the text/image changes.
<main class="page"><h1>Downloads</h1>
<div class="album1">
<div class="image">
<img src="IMAGES/led-zeppelin-iii-1555363141.jpg" alt="album1">
</div>
<div class="text">
<h2>Led Zeppelin III</h2>
<ol>
<li>Immigrant Song</li>
<li>Friends</li>
<li>Celebration Day</li>
<li>Since I've been Loving You</li>
<li>Out on the Tiles</li>
<li>Gallows Pole</li>
<li>Tangerine</li>
<li>That's the Way</li>
<li>Bron-Y-Aur Stomp</li>
<li>Hats Off to Roy Harper</li>
</ol>
</div>
</div>
And this is what I have for CSS for both main div elements, both are called album1 and album2. The actual text has its own div that applies to both elements.
.album1
{
display: flex;
align-items:flex-start;
padding-bottom: 85px;
margin-right: 30px;
}
.album2
{
display: flex;
float: right;
align-items:flex-start;
padding-bottom: 85px;
}
Your help would greatly be appreciated cause this is for my final and the professor isn't any help :(
If you need additional info I will happily provide it, sorry I'm still getting the hang of this.
From what I understand, you want to display the albums side by side.
To achieve that you can place both the albums in a parent container (Example: classname = albums) and give it a display:flex.
Also you can use justify-content: space-between; to place it in two ends. float: right; is not required.
.albums {
display: flex;
justify-content: space-between;
}
.album1
{
display: flex;
align-items:flex-start;
padding-bottom: 85px;
margin-right: 30px;
}
.album2
{
display: flex;
align-items:flex-start;
padding-bottom: 85px;
}
<main class="page"><h1>Downloads</h1>
<div class="albums">
<div class="album1">
<div class="image">
ASDASD
</div>
<div class="text">
<h2>Led Zeppelin III</h2>
<ol>
<li>Immigrant Song</li>
<li>Friends</li>
<li>Celebration Day</li>
<li>Since I've been Loving You</li>
<li>Out on the Tiles</li>
<li>Gallows Pole</li>
<li>Tangerine</li>
<li>That's the Way</li>
<li>Bron-Y-Aur Stomp</li>
<li>Hats Off to Roy Harper</li>
</ol>
</div>
</div>
<div class="album1">
<div class="image">
ASDASD
</div>
<div class="text">
<h2>Led Zeppelin III</h2>
<ol>
<li>Immigrant Song</li>
<li>Friends</li>
<li>Celebration Day</li>
<li>Since I've been Loving You</li>
<li>Out on the Tiles</li>
<li>Gallows Pole</li>
<li>Tangerine</li>
<li>That's the Way</li>
<li>Bron-Y-Aur Stomp</li>
<li>Hats Off to Roy Harper</li>
</ol>
</div>
</div>
</div>
You can create a parent div for both div album1 and album2,
then make it display:flex , so album1 and album2 will align next to each other.
.albumgroup { display:flex; }
.album1 { //your css here}
.album2 { //your css here}
<!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>Document</title>
</head>
<body>
<div class="albumgroup">
<div class="album1">
<div class="image">
<img src="IMAGES/led-zeppelin-iii-1555363141.jpg" alt="album1">
</div>
<div class="text">
<h2>Led Zeppelin III</h2>
<ol>
<li>Immigrant Song</li>
<li>Friends</li>
<li>Celebration Day</li>
<li>Since I've been Loving You</li>
<li>Out on the Tiles</li>
<li>Gallows Pole</li>
<li>Tangerine</li>
<li>That's the Way</li>
<li>Bron-Y-Aur Stomp</li>
<li>Hats Off to Roy Harper</li>
</ol>
</div>
</div>
<div class="album2">
<div class="image">
<img src="IMAGES/led-zeppelin-iii-1555363141.jpg" alt="album2">
</div>
<div class="text">
<h2>Led Zeppelin IV</h2>
<ol>
<li>Immigrant Song</li>
<li>Friends</li>
<li>Celebration Day</li>
<li>Since I've been Loving You</li>
<li>Out on the Tiles</li>
<li>Gallows Pole</li>
<li>Tangerine</li>
<li>That's the Way</li>
<li>Bron-Y-Aur Stomp</li>
<li>Hats Off to Roy Harper</li>
</ol>
</div>
</div>
</div>
</body>
</html>
I will provide you a pretty simple example on how to do this:
index.html
<!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>Document</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<div class="album1">
<h1>Album1</h1>
</div>
<div class="album2">
<h1>Album2</h1>
</div>
</div>
</body>
</html>
styles.css:
* {
padding: 0;
margin: 0;
}
.container {
display: flex;
height: 100vh;
}
.album1 {
background-color: aquamarine;
width: 50vw;
}
.album2 {
background-color: blueviolet;
width: 50vw;
}
ANd the result will be like this:
Then, inside your album1 and album2, put everything you want.
Related
I would like my 3 columns to be responsive on mobile devices and I have trouble doing it. What do I add to it, or how do I make it work? :) I know it might be a silly question, but I am supper beginner, trying to learn. Thank you
This is the code im using:
<ul style="-webkit-column-count: 3; -moz-column-count: 3; column-count: 3; column-gap: 310px;">
<li>
<p>aaa</p>
</li>
<li>
<p>bbb</p>
</li>
<li>
<p>ccc</p>
</li>
<li>
<p>ddd</p>
</li>
<li>
<p>eee</p>
</li>
<li>
<p>fff</p>
</li>
<li>
<p>ggg</p>
</li>
<li>
<p>hhh</p>
</li>
<li>
<p>iii</p>
</li>
</ul>
hint From your comment
#G-Cyrillus I dont have a preference, but probably one if I had to choose :) Either way is fine
You could use column-width instead column-count and eventually clamp() sizing it :
li {border:1px solid;margin-bottom:2px}
<ul style=" column-width: clamp(310px, 30vw, 800px); ">
<li>
<p>aaa</p>
</li>
<li>
<p>bbb</p>
</li>
<li>
<p>ccc</p>
</li>
<li>
<p>ddd</p>
</li>
<li>
<p>eee</p>
</li>
<li>
<p>fff</p>
</li>
<li>
<p>ggg</p>
</li>
<li>
<p>hhh</p>
</li>
<li>
<p>iii</p>
</li>
</ul>
About clamp() , see : https://developer.mozilla.org/en-US/docs/Web/CSS/clamp()
About column-width see : https://developer.mozilla.org/en-US/docs/Web/CSS/column-width
You can use grid, it is imao more clear solution:
<div style="display: grid; grid-template-rows: 3; grid-template-columns: 3">
<p>Skvělé produkty</p>
<p>Rychlé doručení</p>
<p>Ochotu</p>
<p style="grid-row: 2">Přívětivé ceny</p>
<p style="grid-row: 2">Výhodné dopravné</p>
<p style="grid-row: 2">Spolehlivost</p>
<p style="grid-row: 3">Bleskovou expedici</p>
<p style="grid-row: 3">Férový obchod</p>
<p style="grid-row: 3">Bezodkladnou reklamaci</p>
</div>
Edit: Examples from chat:
<div style="display: grid; grid-template-rows: 2; grid-template-columns: 3">
<li>Skvělé produkty</li>
<li>Rychlé doručení</li>
<li>Ochotu</li>
<li style="grid-row: 2">Skvělé produkty 2</li>
<li style="grid-row: 2">Rychlé doručení 2</li>
<li style="grid-row: 2">Ochotu 2</li>
</div>
<div style="display: grid; grid-template-rows: 2; grid-template-columns: 3">
<p><img src="https://i.stack.imgur.com/PDGGj.png" style="vertical-align: middle">Skvělé produkty</p>
<p><img src="https://i.stack.imgur.com/PDGGj.png" style="vertical-align: middle">Rychlé doručení</p>
<p><img src="https://i.stack.imgur.com/PDGGj.png" style="vertical-align: middle">Ochotu</p>
<p style="grid-row: 2"><img src="https://i.stack.imgur.com/PDGGj.png" style="vertical-align: middle">Přívětivé ceny</p>
<p style="grid-row: 2"><img src="https://i.stack.imgur.com/PDGGj.png" style="vertical-align: middle">Výhodné dopravné</p>
<p style="grid-row: 2"><img src="https://i.stack.imgur.com/PDGGj.png" style="vertical-align: middle">Spolehlivost</p>
</div>
The are some ways to make a responsive web design. But i think using css #media is easy to use
#media only screen and (max-width: 768px) {
.left,
.right {
float: none;
width: 100%;
}
}
<!DOCTYPE html>
<html>
<head>
<title>Media responsive</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.left,
.right {
height: 400px;
}
.left {
background: blue;
float: left;
width: 60%;
}
.right {
background: red;
float: right;
width: 40%;
}
</style>
</head>
<body>
<div class="container">
<div class="left">
LEFT
</div>
<div class="right">
RIGHT
</div>
</div>
</body>
</html>
As you see above, I create 2 elements float 2 sides. But when using small screen (<768px) you will see it turn into 1 line
You can read more here: W3 Responsive Web
Something keeps in mind:
Consider use rem, vh,vw, em instead of px because it like % and suitable to responsive
Always add meta viewport
Hello I'm having trouble centering my ul list to my title and main image using css. If you run the code the ul list is a bit to the left of the centered image and title. Also if I type in text-align: center; to the ul list it looks unorganized and the bullets aren't aligned to the left. Here is the code
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>McDonalds Tribute Page</title>
<link rel="stylesheet" type="text/css" href="tribute.css">
</head>
<body>
<div id="main">
<header id="title">
<h1>
McDonalds Tribute Page
</h1>
</header>
<div id="main-image">
<!-- <img src="https://i.imgur.com/2YsKZFI.png" alt="McDonalds Golden Arches" /> -->
</div>
<div id="tribute-info">
<body>
<h3 class="color-text">A timeline of all things McDonalds</h3>
<ul id=list-info>
<li>
<strong>1953</strong> - McDonalds opens first franchise in Phoenix
</li>
<li>
<strong>1954</strong> - Ray Kroc approaches McDonald Brothers about opening first franchise outside of CA and AZ
</li>
<li>
<strong>1958</strong> - McDonalds has sold 100 million burgers
</li>
<li>
<strong>1958</strong> - McDonalds spreads to the East Coast
</li>
<li>
<strong>1961</strong> - McDonald Brothers sold business rights to Ray Kroc for $2.7 million
</li>
<li>
<strong>1963</strong> - 1 Billion burgers sold
</li>
<li>
<strong>1968</strong> - The Big Mac was introduced to McDonalds
</li>
<li>
<strong>1980</strong> - Chicken McNuggets are introduced
</li>
<li>
<strong>2015</strong> - All day breakfast introduced
</li>
</ul>
</body>
</div>
<!-- <div class="img-gallery">
<section>
<img src="https://i.imgur.com/2IkFLba.jpg" alt="big mac" />
<img src="https://i.imgur.com/EZ58bYY.jpg" alt="chicken nugget" />
<img src="https://i.imgur.com/EC9zcIT.png" alt="filet o fish" />
<img src="https://i.imgur.com/17piAkN.jpg" alt="McFlurry" />
<img src="https://i.imgur.com/hUog2df.jpg" alt="burger king" />
<img src="https://i.imgur.com/WiDJfLM.jpg" alt="mcdonalds logo" />
</section>
</div> -->
<body>
</body>
</div>
</body>
</html>
and my css
#main {
display: grid;
}
#title {
text-align: center;
}
#main-image {
display: block;
margin-left: auto;
margin-right: auto;
}
#tribute-info {
margin-left: auto;
margin-right: auto;
}
I can't post images so I commented out the picture
Your UL is being centered, but you just need to give the wrapping div a width else it takes up 100%:
#main {
display: grid;
}
#title {
text-align: center;
}
#main-image {
display: block;
margin-left: auto;
margin-right: auto;
}
#tribute-info {
margin-left: auto;
margin-right: auto;
width: 300px;
}
ul {
padding: 0;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>McDonalds Tribute Page</title>
<link rel="stylesheet" type="text/css" href="tribute.css">
</head>
<body>
<div id="main">
<header id="title">
<h1>
McDonalds Tribute Page
</h1>
</header>
<div id="main-image">
<!-- <img src="https://i.imgur.com/2YsKZFI.png" alt="McDonalds Golden Arches" /> -->
</div>
<div id="tribute-info">
<h3 class="color-text">A timeline of all things McDonalds</h3>
<ul id=list-info>
<li>
<strong>1953</strong> - McDonalds opens first franchise in Phoenix
</li>
<li>
<strong>1954</strong> - Ray Kroc approaches McDonald Brothers about opening first franchise outside of CA and AZ
</li>
<li>
<strong>1958</strong> - McDonalds has sold 100 million burgers
</li>
<li>
<strong>1958</strong> - McDonalds spreads to the East Coast
</li>
<li>
<strong>1961</strong> - McDonald Brothers sold business rights to Ray Kroc for $2.7 million
</li>
<li>
<strong>1963</strong> - 1 Billion burgers sold
</li>
<li>
<strong>1968</strong> - The Big Mac was introduced to McDonalds
</li>
<li>
<strong>1980</strong> - Chicken McNuggets are introduced
</li>
<li>
<strong>2015</strong> - All day breakfast introduced
</li>
</ul>
</div>
<!-- <div class="img-gallery">
<section>
<img src="https://i.imgur.com/2IkFLba.jpg" alt="big mac" />
<img src="https://i.imgur.com/EZ58bYY.jpg" alt="chicken nugget" />
<img src="https://i.imgur.com/EC9zcIT.png" alt="filet o fish" />
<img src="https://i.imgur.com/17piAkN.jpg" alt="McFlurry" />
<img src="https://i.imgur.com/hUog2df.jpg" alt="burger king" />
<img src="https://i.imgur.com/WiDJfLM.jpg" alt="mcdonalds logo" />
</section>
</div> -->
<body>
</body>
</div>
</body>
</html>
I'm working with my personal page.
I want to make columns out of the lists .
How can i do this .
I tried grid's and columns and it don't work . For some reason i'm thinking a web kit. Any suggestions ? I also tried to float margin , width, position , left and so forth . I'm officially stuck . I did use a max with of 960 pixels. Was that the wrong way to go ? I also centered aligned my page as well? Was that wrong as well ?
/*body styles*/
body, html{background-color:#4B88A2;}
.grid-container{display:grid;
/*grid grid-template: 1fr repeat(11,10px 1fr);*/
grid-template-columns:[left-sidebar-start] 1fr 10px 1fr[right-sidebar-end]
10px
[main-area-start]1fr reapeat(11,[gutter] 10px [row]1fr[main-area-end])
10px
[right-sidebar-start] 1fr 10px 1fr [right-sidebar-end];
grid-template-rows: [header-start] 1fr[header-end]
10px
[main-start] 1fr[main-end]
[footer-start]1fr[footer-end]
}
/*.content-wrap{max-width:950px;
margin: 0 auto;overflow:auto;padding:60px 50px; }*/
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
/*headers*/
h1,h2{font-family:'lobster', cursive;
font-size:40px;font-weight: 400;}
h1{font-size:80px;}
h3{margin:0;}
header{text-align: center;}
header{padding-top: 60px;position:relative; }
h2 {
margin: 10px 0;
font-size: 40px;}
/*navigation*/
.nav{text-align:center;
position:fixed; top:0;width:100%;margin:0px; }
.nav a{display:inline-block;
padding:15px 20px;
text-decoration:none;
text-transform:uppercase;
font-weight:700;
}
.footer{position: fixed;
left:0; bottom:0;width:100%;
text-align:center; background-color:slategray;
display:block;}
/*columns*/
.column1{float:left;
width:900px;
marging:10px;}
.column2{float:left;
width:300px;margin:10px;}
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="https://fonts.googleapis.com/css?family=Lobster|Roboto" rel="stylesheet">
<link href="css/multiColumnTemplate.css" rel="stylesheet" type="text/css">
</head>
<body>
<header role="banner">
<nav role="navigation">
<div class="nav">
Home
About
Portfolio
Downloads
<!-- Right navigation-->
</div>
</nav>
<div class="content-wrap">
<h1>Larry J Designs</h1>
<h2>Beginner web designer/ artist</h2>
<div class="about" id="about-me">
<p><img src="images/placeholder.jpg" alt="stock" style="width:100px;height:100px;"></p>
<p> Hello, I'm Larry J , I currently live in the DC Metro area , i also love working on art in my spare time.
As a teen in high I use to love to draw and build websites ,
Currently, I work a full time job like most , however in my spare time I love working on learning web design and drawing .
Life has a long road to success , but on the road there are that you have to learn to get to the next level . Here are mines bellow :</p></div></div>
</header>
<main role="main">
<section><!--my skill-->
<div class="content-wrap">
<div class="column1">
<h3>Skills in progress</h3>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>Java script</li>
<li>J query</li>
</ul></div>
<div class="column2">
<h3>Next Skills to learn</h3>
<ul>
<li>Photoshop</li>
<li>Illustrator</li>
<li>Logo design</li>
<li>Graphic arts</li>
<li>T-shirt Design</li>
</ul>
</div></section>
</main>
<!--my skill-->
<!--skills list end-->
<!--container end-->
<div class="footer">
<p>©Larry J designs </p>
</div>
</body>
`.
I updated your column1 and column2 css with display: inline-block instead of float and it worked. I also made the width percentual.
/*body styles*/
body, html{background-color:#4B88A2;}
.grid-container{display:grid;
/*grid grid-template: 1fr repeat(11,10px 1fr);*/
grid-template-columns:[left-sidebar-start] 1fr 10px 1fr[right-sidebar-end]
10px
[main-area-start]1fr reapeat(11,[gutter] 10px [row]1fr[main-area-end])
10px
[right-sidebar-start] 1fr 10px 1fr [right-sidebar-end];
grid-template-rows: [header-start] 1fr[header-end]
10px
[main-start] 1fr[main-end]
[footer-start]1fr[footer-end]
}
/*.content-wrap{max-width:950px;
margin: 0 auto;overflow:auto;padding:60px 50px; }*/
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
/*headers*/
h1,h2{font-family:'lobster', cursive;
font-size:40px;font-weight: 400;}
h1{font-size:80px;}
h3{margin:0;}
header{text-align: center;}
header{padding-top: 60px;position:relative; }
h2 {
margin: 10px 0;
font-size: 40px;}
/*navigation*/
.nav{text-align:center;
position:fixed; top:0;width:100%;margin:0px; }
.nav a{display:inline-block;
padding:15px 20px;
text-decoration:none;
text-transform:uppercase;
font-weight:700;
}
.footer{position: fixed;
left:0; bottom:0;width:100%;
text-align:center; background-color:slategray;
display:block;}
/*columns*/
.column1{
display: inline-block;
width:calc(60%-10);
margin:10px;
vertical-align: top;
}
.column2{
display: inline-block;
width:calc(30%-10);
margin:10px;
vertical-align: top;
font-size:
}
.content-wrap {
}
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="https://fonts.googleapis.com/css?family=Lobster|Roboto" rel="stylesheet">
<link href="css/multiColumnTemplate.css" rel="stylesheet" type="text/css">
</head>
<body>
<header role="banner">
<nav role="navigation">
<div class="nav">
Home
About
Portfolio
Downloads
<!-- Right navigation-->
</div>
</nav>
<div class="content-wrap">
<h1>Larry J Designs</h1>
<h2>Beginner web designer/ artist</h2>
<div class="about" id="about-me">
<p><img src="images/placeholder.jpg" alt="stock" style="width:100px;height:100px;"></p>
<p> Hello, I'm Larry J , I currently live in the DC Metro area , i also love working on art in my spare time.
As a teen in high I use to love to draw and build websites ,
Currently, I work a full time job like most , however in my spare time I love working on learning web design and drawing .
Life has a long road to success , but on the road there are that you have to learn to get to the next level . Here are mines bellow :</p></div></div>
</header>
<main role="main">
<section><!--my skill-->
<div class="content-wrap">
<div class="column1">
<h3>Skills in progress</h3>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>Java script</li>
<li>J query</li>
</ul></div>
<div class="column2">
<h3>Next Skills to learn</h3>
<ul>
<li>Photoshop</li>
<li>Illustrator</li>
<li>Logo design</li>
<li>Graphic arts</li>
<li>T-shirt Design</li>
</ul>
</div></section>
</main>
<!--my skill-->
<!--skills list end-->
<!--container end-->
<div class="footer">
<p>©Larry J designs </p>
</div>
</body>
Also, there was a typo on the margin property name on the line 58 in your css code.
Hope it helps,
best
I created 3 divs:
header
menu
display area
I created three tag and I need to align two divs in the same row — the menu div in the left and display in the right.
I am getting error in that I tried many examples and none of them are working.
The header should be fixed in top
and others should be as it is
What could be the problem, and how can I fix it?
HTML
<html lang="en" class="no-js">
<head>
<meta charset="UTF-8" />
<title>Blueprint: Vertical Icon Menu</title>
<link rel="shortcut icon" href="../favicon.ico">
<link rel="stylesheet" type="text/css" href="css/leftmenu.css" />
<link rel="stylesheet" type="text/css" href="flaticon.css" />
<script src="js/modernizr.custom.js"></script>
<style>
body {position: relative;font-family: 'Lato', Calibri, Arial, sans-serif; color: #47a3da;}
body, html { font-size: 100%; height: 100%; padding: 0; margin: 0;}
a {color:#f0f0f0;text-decoration: none;}
a:hover {color: #000;}
#footer{height: 50px;background-color: #ddd;width: 100%;}
#header{z-index: 1;top: 0;margin-top: 0px;position: fixed;height: 90px;width: 100%;background-color: #ddd;}
.dis123{width: 500px;height: 500px;background-color: #ddd;text-align: left;
display: block;
margin-left: auto;
margin-right: auto;}
</style>
</head>
<div id="header">
Head
</div>
<body>
<div class="postleftmen">
<ul class="cbp-vimenu">
<li>SELECT CATEGORY</li>
<li>MOBILE & TABLET</li>
<li>ELECTRONICS & COMPUTER</li>
<li>Vehicles</li>
<li>Home & Furniture</li>
<li>Pets</li>
<li>Books, CDs & Hobbies</li>
<li>Clothing & Accessories</li>
<li>Kids & Baby</li>
<li>Sports & Health</li>
<li>Services</li>
<li>Jobs</li>
<li>Real Estate</li>
</ul>
</div>
<div class="dis123">
display
</div>
<div id="footer">
footer
</div>
</body>
</html>
You need to use float:left property two show two DIVS in row. and then use clear:both for div to place footer.
HTML
<div id="header">
Head
</div>
<div class="postleftmen">
<ul class="cbp-vimenu">
<li>SELECT CATEGORY</li>
<li>MOBILE & TABLET</li>
<li>ELECTRONICS & COMPUTER</li>
<li>Vehicles</li>
<li>Home & Furniture</li>
<li>Pets</li>
<li>Books, CDs & Hobbies</li>
<li>Clothing & Accessories</li>
<li>Kids & Baby</li>
<li>Sports & Health</li>
<li>Services</li>
<li>Jobs</li>
<li>Real Estate</li>
</ul>
</div>
<div class="dis123">
display
</div>
<div style="clear:both"> </div>
<div id="footer">
Footer
</div>
CSS
body {position: relative;font-family: 'Lato', Calibri, Arial, sans-serif; color: #47a3da;}
body, html { font-size: 100%; height: 100%; padding: 0; margin: 0;}
a {color:#f0f0f0;text-decoration: none;}
a:hover {color: #000;}
#header{height: 90px;width: 100%;background-color: #ddd;}
#footer
{
height: 50px;width: 100%;background-color: #ddd;
}
.dis123
{
width:60%;
float:left; height: 500px;background-color: #ddd;text-align: left;
}
.postleftmen
{
width:40%;
float:left;
}
DEMO
I have the following HTML
<!DOCTYPE html>
<html>
<body>
<h1>My Great Web</h1>
<FONT SIZE = "5">
<ol>
<li> Foo. </li>
<li> Bar. </li>
<ol>
</FONT>
<br>
<hr style="width: 100%"/>
</body>
</html>
Which produce the following figure.
Notice that the horizontal line doesn't extend fully to the left. How can I do that?
You have to close your <ol>
<ol>
<li> Foo. </li>
<li> Bar. </li>
</ol>
The font tag is not supported in HTML5. Use CSS instead.
The font element is deprecated in HTML 4.01.
It might display poorly on some browsers
<html>
<body>
<h1>My Great Web</h1>
<div style="font-size:12px;">
<ol>
<li> Foo. </li>
<li> Bar. </li>
</ol>
</div>
<br>
<hr/>
</body>
</html>
Do this :
<!DOCTYPE html>
<html>
<head>
<style>
body {
margin: 0 ;
padding: 0;
font-size: 14px;
}
.container {
width: 80%;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="container">
<h1>My Great Web</h1>
<div class="list">
<ol>
<li> Foo. </li>
<li> Bar. </li>
<ol>
</div>
<br />
</div>
<hr />
</body>
</html>