HTML Tutorial


 Forum HomeForum Home   FAQFAQ   SearchSearch   MemberlistMemberlist   RegisterRegister 
 ProfileProfile   Log in to check your private messagesLog in to check your private messages   Log inLog in 
RegisterRegister - Not registered yet? Got something to say? Join HTML Code Tutorial!
horizontal divs
Post new topic   Reply to topic    HTML Help Forum Index -> CSS
View previous topic :: View next topic  
Author Message
nishanthaMe



Joined: 14 May 2008
Posts: 3

PostPosted: Sun May 18, 2008 1:37 am     horizontal divs Reply with quote

<html>
<head><title>mypage</title>
</head>
<body>
<div id="first">
<div> first div</div>
<div> second div</div>
</div>
</body>
</html>

Out put of this code appers as follows

first div
second div


But I want the out out as

second div frist div

and the above out put should be right hand side of the browser.

So I would be very thank full if anyone can give me an ide

cheers

Nishantha
sticks464



Joined: 31 Dec 2006
Posts: 1179

PostPosted: Sun May 18, 2008 4:28 am     Reply with quote

Since there is apparently no css, the divs will assume 100% width of the viewport therefore the only way to get content on the right side is to do text-align:right. From the code you posted, no one can tell if you want the divs to be full width one after the other or a set width with columns. As you currently have the code, all you have to do to get the second div first is
Code:
<div id="first">
<div> second div</div>
<div> first div</div>
</div>

and the css
Code:
<style type="text/css">
#first {text-align:right;}
</style>
Straystudio



Joined: 14 Apr 2008
Posts: 261
Location: Nord Italy

PostPosted: Sun May 18, 2008 4:36 am     DIV float property Reply with quote

I know TWO ways; more than words, I'll give some patterns to be processed.


- STYLE. Allowing some Elements to float: left/right;

Code:

<html>
<head><title>mypage</title>
</head>
<body>
<div id="first">
<div style="float: left;"> first div</div>
<div style="float: right;"> second div</div>
</div>
</body>
</html>


Also is possible giving both DIVs the same orientation:
Code:

<html>
<head><title>mypage</title>
</head>
<body>
<div id="first">
<div style="float: right;"> first div</div>
<div style="float: right;"> second div</div>
</div>
</body>
</html>


Since it does not exist float: center; I worked out this as well:
Code:

<html>
<head><title>mypage</title>
</head>
<body>
<div id="first">
<div style="float: left;"> first div</div>
<div style="float: right;"> second div</div>

<div align="center"> third div</div>

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



- TABLE. Placing DIVs inside table cells:
Code:

<html>
<head><title>mypage</title>
</head>
<body>
<div id="first">

<table height="" width="100%" border="1" cellpadding="0" cellspacing="0"><tr>
 <td width="30%" align="left">
  <div style=":;"> first div</div>
 </td>
 <td width="30%" align="center">
  <div style=":;"> second div</div>
 </td>
 <td width="30%" align="right">
  <div> third div</div>
 </td></tr>
</table>

</div>
</body>


As lons as You do not write </TR><TR> to start a new horizontal line of cells, cells keep staying on the same row with their content as well.
 
sticks464



Joined: 31 Dec 2006
Posts: 1179

PostPosted: Sun May 18, 2008 10:49 am     Reply with quote

Here's how I would do the page. Make the two images at the top into one 850 X 270. Then the following code
Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>The History of Hardcore</title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="Joe Dawtry">
<meta name="Keywords" content="practice">
<meta name="Description" content="practice">
<link rel="stylesheet" type="text/css" href="index.css">
<style type="text/css">
* {
   margin:0;
   padding:0;
}

body {
   font: 95% verdana, sans-serif;
   line-height: 1.88889;
   color: #555753;
   background: #fff ;
   text-align: center;
}

#container {
   width:850px;
   margin:0 auto;
   text-align:left;
}

#pageheader {
   background:url(header.jpg) no-repeat;
   height:248px;
}

h2 {
   float:left;
   margin:160px 0 0 20px;
}

#navcontainer {
   margin: 20px 0 0 30px;
   padding: 0;
   height: 20px;
   position:relative;
   float:left;
   clear:left;
}

#navcontainer ul
{
   border: 0;
   margin: 0;
   padding: 0;
   list-style-type: none;
   text-align: center;
}

#navcontainer ul li
{
   display: block;
   float: left;
   text-align: center;
   padding: 0;
   margin: 0;
}

#navcontainer ul li a {
   background: #fff;
   width: 78px;
   height: 18px;
   border-top: 1px solid #00;
   border-left: 1px solid #00;
   border-bottom: 1px solid #00;
   border-right: none;
   padding: 0;
   margin: 0 0 10px 0;
   color: #0f0f0f;
   text-decoration: none;
   display: block;
   text-align: center;
   font: normal 10px/18px "Lucida Grande", "Lucida Sans Unicode", verdana, lucida, sans-serif;
}

#navcontainer ul li a:hover {
   color: #fff;
   background: #000000;
}

#navcontainer a:active {
   background: #00;
   color: #fff;
}

#navcontainer li#active a {
   background: #0f0f0f;
   border: 1px solid #0f0f0f;
   color: #fff;
}

#content {
   width:850px;
}

#quicksummary {
   margin: 40px 0 20px 10px;
   width: 160px;
   float:left;
   position:relative;
   height:1%;
}

#quicksummary p {
   font: italic 10pt/22pt georgia;
}

#howitbegan {
   float:left;
   width:660px;
   margin:20px 0 0 20px;
}

</style>
</head>

<body>
<div id="container">
<div id="pageheader">
<h2>The History of Hardcore</h2>
<div id="navcontainer">
   <ul id="navlist">
      <li id="active"><a href="index.html" id="current">Home</a></li>
      <li><a href="item2.html">Item two</a></li>
      <li><a href="#">Item three</a></li>
      <li><a href="#">Item four</a></li>
      <li><a href="#">Item five</a></li>
   </ul>
</div>
</div>

<div id="content">
<div id="quicksummary">
<p class="p1"><span>Hardcore Punk is a subgenre of punk rock that originated in North America in the late 1970s. The new sound was generally thicker, heavier and faster than earlier punk rock. The songs are usually short, fast and loud, covering topics such as politics, personal freedom, violence, social alienation, Straight Edge, war, and the hardcore subculture itself.</span></p>

<p class="p2"><span>Hardcore spawned several fusion genres and subgenres, some of which had mainstream success, such as skate punk, melodic hardcore and metalcore.</span></p>
</div>           

<div id="howitbegan">
<img src="thestart.jpg" >
<p class="p1"><span>In North America, the music genre that became known as hardcore punk originated in different areas in late 1970's and early 1981 in California, Washington, DC, Chicago, New York City, Winnipeg, Vancouver, Toronto and Boston. The origin of the term hardcore punk is not documented. The Vancouver-based band D.O.A. may have helped to popularize the term with the title of their 1981 album, Hardcore '81. However, until about 1983, the term hardcore was used fairly sparingly, and mainly as a descriptive term. (i.e., a band would be called a "hardcore band" and a concert would be a "hardcore show"). American teenagers who were fans of hardcore punk simply considered themselves fans of punk � although they were not necessarily interested in the original punk rock sound of late 1970s (e.g., Television, the Ramones, the Sex Pistols, The Clash, The Heartbreakers). In many circles, hardcore was an in-group term, meaning 'music by people like us,' and it included a wide range of sounds, from hyper-speed hardcore to sludgy dirge-rock, and sometimes including arty experimental bands, such as The Stickmen and Flipper.</span></p>

<p class="p2"><span>Since most bands had little access to any means of production, hardcore lauded a <acronym title="Do It Yourself">DIY</acronym> approach. In most cities the hardcore scene relied on inexpensively-made <acronym title="Do It Yourself">DIY</acronym> recordings done on four-track recorders and sold at shows or by mail. Concerts were promoted by photocopied zines, community radio shows, and affixing posters to walls and telephone poles. Hardcore punk fans adopted a a dressed-down style of T-shirts, jeans, and crewcut style. While 1977-era punk had used <acronym title="Do It Yourself">DIY</acronym> clothing as well, such as torn pants held together with safety pins, the "dressed down" style of 1980s hardcore scene contrasted with the more campy, elaborate and provocative fashion styles of late 1970s punk rockers such as Soo Catwoman, which featured make-up, elaborate hairdos and avant-garde clothing experiments.</span></p>

<p class="p3"><span>At the same time, there was a parallel development in the UK of a British form of hardcore punk, which later became known as UK 82. UK 82 bands such as Discharge and Charged GBH took the existing late 1970s punk sound and added the incessant, heavy drumbeats and "wall of sound" distortion guitar sound of New Wave of British Heavy Metal (NWOBHM) bands such as Mot�rhead. While North American hardcore punk and UK 82 hardcore developed at the same time, it is not clear whether UK 82 was directly influenced by the American hardcore punk scene, or vice versa.</span></p>
</div>
</div>
</div>
</body>
</html>
Display posts from previous:   
Post new topic   Reply to topic    HTML Help Forum Index -> CSS All times are GMT - 8 Hours
Page 1 of 1

 
Jump to:  
You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot vote in polls in this forum
HTML Help Archive
Powered by phpBB © 2001, 2005 phpBB Group
HTML Help topic RSS feed 

 
HOSTING / DESIGN
MAKE MONEY

Home
  |   Tutorials   |   Forum   |   Quick List   |   Link Directory   |   About
Copyright ©1997-2002 Idocs and ©2002-2007 HTML Code Tutorial