Learn VBA & Macros in 1 Week!

CSS - Centered 100% Height

Full Excel VBA Course - Beginner to Expert

Centered 100% Height	View Content

Hey guys,

I know that this is a well covered topic. but I am trying to get a container div to sit centered and 100% of the page.

my css reads:

* {
margin:0;
padding: 0;
}

html, body {
height: 100%;
}

#container {
position: relative;
width: 900px;
height: 100%;
margin: 0 auto;
background: url("imgs/backgroundmain.gif");
}

It works fine for the required browsers until the contents of the page goes beyond the size of the screen then the background stops. it literally stops at 100% of window rather than 100% of content. Any ideas???

James MacLeod

Full Excel VBA Course - Beginner to Expert

Alter Line-height Css Property Based On Image Height And Hyperlinks

Similar Tutorials

View Content

Hi all,

I am trying to automate everything on my test website and I have one more angle to cover.

In effect, I want to adjust the line-height property (which I can do) based on the number of files within a specific folder (PHP and already done). The more files in the folder, the lower the line-height value must be. This is to ensure if I copy additional files into the folder, then the navigation menu (which is PHP reading files in this particular folder) will alter the CSS line-height property accordingly to ensure it can never exceed a certain height.

Sounds wierd? go to www.re3.org.uk (next to the RE3 image, I have a list of hyperlinks which are obtained from files within the folder)

My problem, when adjusting the CSS property (which is set as cm in *.css file) in javascript, it doesn't correspond correctly, the line-height property in javascript doesn't appear to be work in cm but some other measurement.

Does anyone know how to change what unit of measurement Javascript works in? Or does anyone know what unit of measurement javascript uses when adjusting line-height / line-width values?

I want to create a mini-algorithm that works out the appropriate line-height based on the image height (got that already) and the number of files in the folder (got that too) so the menu automatically adjusts to fit.

Whew!

Centered Div

Similar Tutorials

View Content

I have a site that I am working on:

test dot choupique dot com

The #subpage class is centered in internet explorer 9, but not firefox 5. I can't figure out why for the life of me. Can anyone see why?

Thanks

Img Perfectly Centered In Css Box

Similar Tutorials

View Content

As a CSS beginner I want to change my few table based web sites to CSS based. Currently I may have a table with a border exactly fitting a graphic image... looks nice. Now I want that same image to fit perfectly in a CSS box in order to take advantage of all the extra features of color and border that comes with CSS.
The problem is... nothing that I do will exactly fit the rectangular image in the CSS box. I have fooled with the dimensions of the box and image but somehow there is ALWAYS about a 4px edge of background at the bottom edge of the image. The left,top,right borders are exactly bordering the image as should be. Is this possible in CSS, I would like to follow the CSS way.

#bottom_center {
margin: 0px;
padding: 0px;
background: #ccc;
width: 470px;
height: 90px;
border-style: ridge;
}
---- then in the body ----
<div align="center">
<div id="bottom_center">
<img border="1" src="able_appraisal_web_logo.jpg" alt="Able Appraisal, Inc."
width="470" height="90">
</div>
</div>

Div Left Of Centered Div?

Similar Tutorials

View Content

How can i accomplish this with CSS?

See image he
hxxp://g.imagehost.org/0398/css.png

(replace x with t)

My Menu Is Not Centered :(

Similar Tutorials

View Content

http://www.lightblu.com/

(It speaks for itself)

how come on my test page, http://www.lightblu.com/test.php works fine (ie. the menu is centered correctly), but not on the homepage? What did I do wrong?

Un Centered In Firefox

Similar Tutorials

View Content

Ok,

I give up... can't figure this one out...
the navbar seems to be centered in IE but not in Firefox.

www.moksha.net/index.html

I notice that it doesn't seem to matter whether I am inside the header div or not.

The navbar is a UL. I don't care how wide it is really... I would love to strip all this down to its most essential.

Thanks!

#header
{
padding: 1em;
margin: 0px;
text-align:center;
width:100%;
align: center;
display:block;
}
#navbar {
color:#FFCC33;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
text-decoration: none;
margin:0 auto;
}
#navbar ul {
clear:left;
text-align: center;
margin: 0 auto;
list-style-type: none;
text-indent: 0;
width: 600px;
background-color:#996633;}
#navbar li {
/* float:left;
width:80px; */
padding-right: 1em;
height: 3em;
line-height:3em;
font-size: 20px;
display: inline;
list-style-type: none;
text-align: center;
margin:0;
}
#navbar a {
color:#FF9933;
text-decoration: none;
}
#navbar a:hover {
color:#FFCC33;
}

Centered Search Box

Similar Tutorials

View Content

Hi there, sorry to bother y'all, but I've been fighting with this css for hours now and I can't seem to get it quite right. I'm trying to center a search box and button skinned with an image, which I think should be fairly simple, but I'm not very good with css yet and it's being more evil than usual.

I will try my best to provide all the pertinent information, and thank you very much in advance for any assistance you might provide.

My top bar is as such, at the moment (the current issue being that I can't get the text to not be on the edges with the image border while keeping the text field and the button flush against each other), although I've tried a number of other solutions, this is the closest as of yet that I have gotten.

Code:

<div class="header">
	<div class="leftAlign"><a href="/Controller?pageRequest=home"><img src="/img/spinner.png"></img></a></div>
	<div class="rightAlign" id="topRight">
		<jsp:include page="AccountLinks.jsp"></jsp:include>
	</div><br />
	<form id="searchForm" action="/SearchServlet">
		<input type="text" id="searchText"></input><input type="image" src="/img/searchButton.gif" alt="Search" id="searchButton"></input>
	</form>
</div>

and the relevant css is

Code:

div.header{
	width: 1000px;
	margin: 0 auto;
	min-height: 60px;
	display: block;
	text-align:center;
}

div.leftAlign{
	 float: left;
	 text-align: left;	
}

div.rightAlign{
	float: right;
	text-align: right;
}

#searchForm{
 vertical-align: top;
    margin: 0;
    line-height: 1;
    outline:0;
}

#searchText{
	background:url(/img/searchText.gif) no-repeat top center;
	padding:0px;
	margin:0;
	display:inline;
	border:0;
	width:159px;
	height: 31px;
}

#searchButton {
	background:url(/img/searchButton.gif) no-repeat top center;
	padding-top:0px;
	margin:0;
	display:inline;
	border:0;
	width:42px;
	vertical-align: top;
    line-height: 1;
	height:31px;
}

Any help that you can provide would be greatly appreciated.

Thank you very much.

Div Doesn't Stretch To Page Height, Only Window Height

Similar Tutorials

View Content

Hello everybody!

I have been having a big problem with my webpage for a long time now and hope I can find an answer to my problem with your help. I want a div that contains the content of my pages (which varies in length depending on the individual page) to stretch the length of my page, but it only stretches the length of the window. Here's the HTML and CSS:

HTML (I only included the very basic structure):

<html>
<body>
<div class="container">
<div id="content">
<div id="..."></div>
<div id="..."></div>
<div id="..."></div>
<div id="..."></div>
</div>
</div>
</body>
</html>`

CSS:

html, body {
height: 100%;
font-family: Arial;
font-size: 10px;
color: #000000;
background: #FFF url(../../images/body.png) no-repeat center 40px;
margin: 0;
position: relative;}

.container {
height: 100%;
width: 960px;
margin-right: auto;
margin-left: auto;
position: relative;}

#content {
width: 939px;
min-height: 100%;
position: relative;
top: 210px;
left: 6px;
box-shadow: 0px 0px 8px #666;
-moz-box-shadow: 0px 0px 8px #666;
-webkit-box-shadow: 0px 0px 8px #666;
background-color: #FFF;}

I tried to set the content div to overflow: auto, but that includes a scroll bar for the content div that I do not want. It does, however, create the desired effect of the shadow and background of the #content div all the way to the end of the page. Am I missing anything? I thought min-height would work, but it doesn't! It only stretches the content div to page height and everything else is overflow, but without the content div's background color and shadow. Does anybody maybe see where the problem lies?

Thank you so much in advance for your help.

Simple Div Height Problem In Ie6; Ie Adding 10px Height...

Similar Tutorials

View Content

I've never done much CSS work, but I know this has to be an easy fix. Each DIV appears to be 10px higher when viewed in IE. I want them to be 8px high and they end up being 18px high. In Firefox, Netscape, and Opera it works fine.

Anyone mind correcting this imbarrassing little problem?

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
<title>IE 10px Padding Problem</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
body {
margin:0px; }

#container {
position:relative;
margin:auto;
width:730px; }

#header {
height:110px; }

.textualtop {
border:1px solid #000000;
height:8px; }

.textualbottom {
border:1px solid #000000;
height:8px; }
</style>
</head>
<body>

<div id="container">
<div id="header"></div>
<div class="textualtop"></div>
<div class="textualbottom"></div>
<div class="textualtop"></div>
<div class="textualbottom"></div>
<p>Notice how in IE6 each DIV is 10px higher then in FF. Why is it doing this?</p>
</div>

</body>
</html>

Full-height 3-column Layout, Height Issues

Similar Tutorials

View Content

Hello

Just recently I had an idea for a page I wanted to make, the design is basically a 3-column layout with no traditional header or footer, the height of all three columns should run the length of the window/page height
the left and rightmost column would have a fixed width or a width in em, the center column width should fill the space in between.

If the content is short all columns should extend to the height of the page window, but if the content in any of the columns is longer than the window height they should all extend to reach the bottom of the page and accommodate the content length

In my first attempt things didn't go so well, results varied wildly across browsers so I decided to start from scratch bit by bit

Bellow is the point at which I reach consistent but undesired behaviour, I have validated and tested the code in Firefox 3/Pale Moon, Internet Explorer 8, Chromium 9, and Opera 11
I would like the end result to work in the above browsers as well as IE7 if possible
I should point out now that im not interested in using faux-columns, the layout should not require images, I also wish to have absolute-positioned elements in the columns some time later
Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>Three Columns</title>
		<style type="text/css">
			*, html, body {
				margin: 0;
				padding: 0;
				font-size: 100%;
			}
			html, body {
				width: 100%;
				height: 100%;
			}
			#maincontainer {
				position: relative;
				height: 100%;
				background: #eee;

			}
			#left {
				position: absolute;
				top: 0px;
				left: 0px;
				width: 200px;
				background: #fbb;
				height: 100%;
			}
			#mid {
				position: relative;
				margin: 0 200px 0 200px;
				background: #efe;
				height: 100%;
			}
			#right {
				position: absolute;
				top: 0px;
				right: 0px;
				width: 200px;
				background: #bbf;
				height: 100%;
			}
		</style>
	</head>
	<body>
		<div id="maincontainer">
			<div id="left">
				left start<br />
				left<br />
				left<br />
				left<br />
				left<br />
				left<br />
				left<br />
				left<br />
				left<br />
				left<br />
				left<br />
				left<br />
				left<br />
				left<br />
				left end<br />
			</div>
			<div id="mid">
				mid start<br />
				mid<br />
				mid<br />
				mid<br />
				mid<br />
				mid<br />
				mid end<br />
			</div>
			<div id="right">
				right start<br />
				right<br />
				right<br />
				right<br />
				right<br />
				right<br />
				right<br />
				right<br />
				right<br />
				right<br />
				right<br />
				right<br />
				right<br />
				right<br />
				right<br />
				right<br />
				right<br />
				right<br />
				right<br />
				right<br />
				right<br />
				right<br />
				right end<br />
			</div>
		</div>
	</body>
</html>

In the above example it works as long as the content within the columns is shorter than the window height, but if you re-size the window so that the text in the right or left column goes beyond the page, and then scroll to the bottom, the columns do not extend to the bottom of the page so there is a large gap where the content overflows beyond the column

What I would like to do from this point is make the columns extend to the bottom of the page when this happens, but I'm not sure how best to proceed

I also have a version of the above code which uses floated left and right columns instead of absolute positioned ones, would it be better to work from that? or does it not really matter

Thanks in advance

Cross-browser's Conflict With Image's Height And Div's Height....

Similar Tutorials

View Content

It seem that everytime I added the image tag, the div'x area get bigger in IE but not in Mozilla/Firefox browser. So, I thought by added the "margin-bottom:-360px;" to the div would fix it but it had an opposite effect. Meaning it worked in IE but Mozilla show a vertical scrollbar.

So, does anyone know how can I make the <img> overlap one another without being stacked on one after another in height for IE if I take out the "margin-bottom: -360px;"? Thanks...

Code:

 
 div.divBox1
 {
   width: 286px;
   height: 359px;
   float: left;
 }
 div.divClearFloat
 {
   clear: both;
   height: 0px;  /* For IE Stupidity (it added some spaces after clearing the float) */
   font-size: 1pt;  /* For IE Stupidity (minimum height only work with current font-size somewhere) */
 }
 div.divDottedLineAdvertisementSeperator1
 {
   width: 575px;
   height: 3px;
   background-color: #ff0000;
   font-size: 1pt;  /* For IE Stupidity (minimum height only work with current font-size somewhere) */
 }

Code:

<div class="divBox1">
 <div style="margin-bottom:-360px;">
  <img src="images/doctor.jpg" style="position:relative;top:0px;left:0px;z-index:2;">
  <img src="images/we_help.jpg" style="position:relative;top:-360px;left:0px;z-index:1;">
 </div>
</div>

<div class="divClearFloat"></div>

<div class="divDottedLineAdvertisementSeperator1"></div>

Centered Vertical Alignment Within A Div

Similar Tutorials

View Content

Hi, there.

Having looked around the forum for a CSS method of vertically centering an IMG within a DIV, I found the following code which works perfectly in IE but not FF :

#full-image {
float: right;
width: 380px;
height: 380px;
text-align: center;
line-height: 0px;
background-color: #F0F5F7;
margin-top: 5px;
margin-right: 0px;
margin-bottom: 10px;
margin-left: 10px;
}

#full-image img {
margin-top: expression(( 380 - this.height ) / 2);
}

That's right - works in IE but not FF, which is most unusual! Any ideas how to make this work cross-browser? Thanks in advance for any assistance.

Css Page Centered Template

Similar Tutorials

View Content

Trying to build a CSS Page Centered Template, where content autostretches containers height, as opposed to setting absolute heights. If one column is longer than the others the others should auto stretch to same height.

Also trying to work in a Footer that sits automatically at the bottom. Heres where I am at...as usual different story in every browser.

page
----
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="test.css" rel="stylesheet" type="text/css">
</head>
<body leftmargin="0" topmargin="0"><table><tbody ><tr><td><div class="container">

<div class="top">top</div>
<div class="main1">main1</div>
<div class="main2">main2</div>
<div class="main3">main3</div>

</div></td></tr></tbody></table></body></html>

CSS Sheet
----------
table {
width: 100%;
height: 100%;
}
td {
text-align: center;
vertical-align: top;
}
div.container {
position: relative;
margin: 0 auto;
width: 780px;
text-align: left;
height: 100%;
}
div.top {
position: absolute;
top: -3px;
left: 0px;
width: 780px;
height: 203px;
background-color: #CCC;
}
div.main1 {
position: absolute;
top: 200px;
left: 0px;
width: 200px;
height: 100%;
background-color: #BBB;
}
div.main2 {
position: absolute;
top: 200px;
left: 200px;
width: 200px;
height: 100%;
background-color: #DDD;
}
div.main3 {
position: absolute;
top: 200px;
left: 400px;
width: 380px;
height: 100%;
background-color: #AAA;
}

Centered Page Not Performing In Ie

Similar Tutorials

View Content

Hello everyone. I would like to thank anyone who attempts to solve this in advance.

I have a css page here . If you need me to post the code let me know, but I temporarily have embedded styles so I figured you could view source easily enough. The entire content of the page centers just fine in Firefox2, but unfortunately is aligned to the left in IE7 on PC. Does anyone know why this might be?

Thanks again for your expertise and time,
phpkata.

Centered Horizontal Navigation

Similar Tutorials

View Content

Hi everyone,

I am trying to make a horizontal navigation near the top of my website. But I can't seem to make it center but AND horizontal, i've only been able to center it but not horizontal... or have it horizontal but not center.

This is my CSS so far.

Quote:
ul#nav li {
display:inline;
margin: 0 auto;
width: 100%;
text-align:center;
}

ul#nav li a {
display:block;
height:48px;
width:113px;
background: transparent url(images/nav.png);
margin: 0 auto;
text-indent:-9009px;
}
ul#nav li a:hover {background-position:0 -48px}

ul#nav li#photos a {
width:139px;
margin: 0 auto;
background-position:-113px 0;
}
ul#nav li#photos a:hover {background-position:-113px -48px}

My home link and photo link are currently centered and on top of each other in a vertical fashion with this code.

Please help!

My <ul> Is Stuck Centered In A World Of Css

Similar Tutorials

View Content

Struggling to get my <ul> to display itself on the left side of my sidebar navigation. I just want it over maybe 40 pixels to the left. I'm not sure why the ul is aligning itself in the center.

I tried floating the elements left, but the ul is stuck centered. I tried adjust margins/padding but all that does is truncate the text to another line. I set absolute position and got the list to move all the way to the left, but it broke the flow of the page and the list ran over top of the headers. Any thoughts?

All the CSS structures are imbedded in the STYLE section of the index file.
http://www.mgan.net/work/10-20-04/

Bonus question: Anyone know why in internet explorer when you run the mouse of my top navi-bar the footer graphic for the news section disappears?

Centered, Wrapping Grid - Help

Similar Tutorials

View Content

Hello,

I know basic css and html, but not much more than that. However, the site I am attempting to build is very simple, so hopefully someone here can help me stumble my way through the process.

Here is an example of what I want:
URL

...and when I add new content:
URL

I want a css grid of identical square containers, with a thumbnail in each one. The tricky part is getting the differently-sized thumbnails to be vertically centered in the containers without having to set each one by hand.

This is where I have gotten so far-
http://jimtierneyart.com/test/test.html

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
        
<html>
	<head>
		<style type="text/css"> 
		
		body {
			margin : auto;
		}
		
		.wrapper {
			width: 900px;
			border: 1px solid #bbbbbb;
			margin: 50 auto;
		}
		
		.item {
			
			line-height: 223;
    		text-align: center;
    		float: left;
			width: 223px;
			height: 223px;
			border: 1px solid #dddddd;
			background: #EBEBEB;
		}
		
		img.a {
			margin: auto; 
			max-width:120px;  
			border:0; 
			max-height:175px; 
		}
		
		

</style>

		
		
		
	</head>

	<body>
		<div class="wrapper">

			header

			<BR>
			<BR>




			<div class="item">
			<img class="a" src="image.gif">
			</div>

			<div class="item">
			<img class="a" src="image.gif">
			</div>

			<div class="item">
			<img class="a" src="image.gif">
			</div>

			<div class="item">
			<img class="a" src="image.gif">
			</div>
			
				<div class="item">
			<img class="a" src="image.gif">
			</div>

			<div class="item">
			<img class="a" src="image.gif">
			</div>

			<div class="item">
			<img class="a" src="image.gif">
			</div>

			<div class="item">
			<img class="a" src="image.gif">
			</div>
			
			<div class="item">
			<img class="a" src="image.gif">
			</div>

			<div class="item">
			<img class="a" src="image.gif">
			</div>


		</div>
	</body>
</html>

I need 2 things to happen:

1. The parent container must be centered on the page (this worked fine until I added the Doctype tags.
2. the thumbnails must be vertically centered within the child containers.

Can anyone point me in the right direction?
I would really appreciate some help.

Another (un)centered Text Question

Similar Tutorials

View Content

This is my rendition of Claire Campbell's "Vertical Buttons". Why is my text "Quick Links" not centered in IE? All the other text is centered? Thanks in advance.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<style type="text/css">
#quikcontainer
{
position:         absolute;
top:              120px;
	left:             30px;
	height:           650px;
	width: 143px;
background: white;
border:           orange 2px solid;
margin: 0 auto;
padding-top:    20px;
font-family:      Arial, Helvetica, sans-serif;
font-size: 13px;
text-align: center;
color: #1E599F;

}

ul#quiklist
{
text-align: center;
color:     #1E599F;
list-style: none;
padding: 0;
margin: 0 auto;
width: 100%;
}

ul#quiklist li
{
display: block;
margin: 0;
padding: 0;
}

ul#quiklist li a
{
display: block;
width: 100%;
padding: 0.5em 1em 0.5em 1em;
color: #1E599F;
text-decoration: none;
background: white;
}

#quikcontainer>ul#quiklist li a { width: auto; }


ul#quiklist li a:hover, ul#quiklist li#active a:hover
{
color: white;
background: #1E599F;
border-color: orange;
border-bottom: 2px solid;
border-top:    2px solid;
}
</style>

<html>
<head>
	<title>Untitled</title>
</head>

<body>

<div id="quikcontainer">
<p><strong>Quick Links</strong></p>

<ul id="quiklist">
<li id="active"><a href="#" target="_blank">Aaaaaaa A-A</a></li>

<li><a href="#" target="_blank">AA Aaaa aa Aaaaaa Aaaaaaaa</a></li>

<li><a href="#">Aaaaaaa A-A Aaaaaaa</a></li>

<li><a href="#">Aaa A-A Aaaa</a></li>

<li><a href="#">Aaaaaa A-A Aaaaaa Aaaaaaa</a></li>
</ul>
</div>

</body>
</html>

Horizontally Centered Website

Similar Tutorials

View Content

having trouble centering a web site

what i want to precisely position elements in my site and i thought that i could put all the elements in to one div tag and make that centered. i can center it but the problem is when the browser is resized smaller that the content the site remains centered and center starts diserpering off the left edge. what i want it to do once resized smaller is for a horizontal scroll bar to appear and for content not to disappear on the left edge of the screen. i have half achieved this but now my content dose not stay in the main div

check out my example the "center1" div should appear inside the top light gray box but it dose not!
http://www.thehopeandanchor.net/nypd/layertest.htm

the code:

<!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" xml:lang="en" lang="en">
<head>
<title>redeem file</title>
<style type="text/css">

</style>
</head>
<body>

<div id="center1">
<div id="insidebit">center1</div>
</div>

<div id="center2">
<div id="insidebit">center2</div>
</div>

</body>
</html>

Help! Vertical Centered Content.

Similar Tutorials

View Content

Hello I hope this isnt a stupid questions but here goes.

I have a page designed with vertically centered content It works fine but if you view the page in a smaller screen size some of the content disapears in to the menu area of the browser. Its hard to explain but if you use the sorce code below and view it in any broswer. Make it so the browser is not maximized and then change the height of the window until the scroll bar appears ... you will notice that some of the conent goes into neverland before the srollbar appears. Line 1 disapears and can not be reads. This will be an issue for people viewing my site in 800x600

Thoughts?

Code:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style> 
#horizon {
	background-color: transparent;
	position: absolute;
	top: 50%;
	left: 0px;
	width: 100%;
	margin-top: -200px;
	text-align: center;
	min-width: 900px; 
}
#wrapper {
	background-color: #fff;
	position: relative;
	text-align: left;
	width: 900px;
	height: 380px;
	margin: 0px auto;
	}

	
</style>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body>

<div id="horizon">
<div id="wrapper">
  Line 1<br />
    Line 2<br />
  Line 3<br />
  Line 4
  
</div>
</div>
</body>
</html>