₦airaland Forum

Welcome, Guest: Register • Login • With Google • Trending • Recent • New

Stats: 3,325,067 members, 8,420,138 topics. Date: Thursday, 04 June 2026 at 12:02 PM

Toggle theme

Need Help On HTML Code - Webmasters - Nairaland

Nairaland Forum › Science/Technology › Webmasters › Need Help On HTML Code (1396 Views)

1 Reply (Go Down)

Need Help On HTML Code by Vstuffs(op): 9:30pm On Aug 18, 2014
Well I just decided to go back and restart learning html again.....
I wanted to design a small site(kind of a little project)(without adding much css code)....testing stuffs(b/4 I enter css and js

I have a problem
I want the site to be a three column site,but I do not know how to arrange it to be a three colum site(I do not want to use the table tag)
These are the codes I wrote
<!DOCTYPE HTML>
<html>
<head>
<title>
My Web Project-Vstuffs
</title>
</head>
<body>
<div id="header">
<h1>
<font color="black”>
<a href="http://w3schools.com style=text decoration:none;">

HOME
</a>
<a href="http://vsoftw..com style=text decoration:none;">

ABOUT
</a>

<a href="http://nairaland.com style=text decoration:none;">

CONTACT

</a>

</font>
</h1>
</div>

<form>
<Input type="text">
<a href="http://nairaland.com">
Search
</a>
</input>
</form>

<br/>
This is the header
<div align="left">
<b>
<font="ariel" color="green" size="20">
Suscribe For Our Weekly Newspaper Now!!!
</font>
<form>
Name:<input type="text">
<input type="text">
Email
<br/>
Do you agree to our terms and conditions
<input type="radio" value="yes">Yes
<input type="radio" value="no">No
<br/>
<input type="submit" value="submit">
</div>
I want this to be the first colum by the left
<div align="center">
<font size="20" color="red">
Welcome to vstuffs first post
</font>
</div>
second colum in the center
<div align=right>
Archizes
<ul>
<li>First year</li>
<li>Second Year</li>
<li>Third Year</li>
</ul>
<br/>
Pages
<select dropbox>
<option selected>
<a href=http://w3schools.com style=text decoration:none;>
Home
</a>
</option>
<option>
<a href=http://vsoftw..com style=text decoration:none;>
About
</a>
</option>
<option>
<a href=http://nairaland.com style=text decoration:none;>
Contact
</a>
</option>
</select>
</div>
I want this to be the third colum by the right,and I want all colums in the same line
<font align="center">
<i>
&#169; Vstuffs
</i>
</font>
</body>
</html>
Please how do I arrange all this codes in the same line using the div tag and not the table tag
Share
Re: Need Help On HTML Code by fattbabakay(m): 10:03pm On Aug 18, 2014
Do u mean on d same row or column?? Row is horizontal,column is vertical....If it's row,That "align" should work...buh u'll need to toy with the width & margin of d 'div' ...dey shud all av d same width, then manage d margin-left nd margin-right(using percentage for easy calculation)...
Share
Re: Need Help On HTML Code by maekhel(m): 10:13pm On Aug 18, 2014
to achieve that u must make use of css.
Have edited your code to include the css stylings:
<!DOCTYPE HTML>
<html>
<head>
<title>
My Web Project-Vstuffs
</title>
<style>
#first-col {width: 200px; float: left}
#center-col {width: 500px}
#third-col {width: 200px; float: right}
.clear-float {clear: both}
</style>
</head>
<body>
<div id="header">
<h1>
<font color="black”>
<a href="http://w3schools.com style=text
decoration:none;">
HOME
</a>
<a href="http://vsoftw..com
style=text decoration:none;">
ABOUT
</a>
<a href="http://nairaland.com style=text
decoration:none;">
CONTACT
</a>
</font>
</h1>
</div>
<form>
<Input type="text">
<a href="http://nairaland.com">
Search
</a>
</input>
</form>
<br/>
This is the header
<div id="first-col">
<b>
<font="ariel" color="green" size="20">
Suscribe For Our Weekly Newspaper Now!!!
</font>
<form>
Name:<input type="text">
<input type="text">
Email
<br/>
Do you agree to our terms and conditions
<input type="radio" value="yes">Yes
<input type="radio" value="no">No
<br/>
<input type="submit" value="submit">
</div>
I want this to be the first colum by the left
<div id="center-col">
<font size="20" color="red">
Welcome to vstuffs first post
</font>
</div>
second colum in the center
<div id="third-col">
Archizes
<ul>
<li>First year</li>
<li>Second Year</li>
<li>Third Year</li>
</ul>
<br/>
Pages
<select dropbox>
<option selected>
<a href=http://w3schools.com style=text
decoration:none;>
Home
</a>
</option>
<option>
<a href=http://vsoftw..com
style=text decoration:none;>
About
</a>
</option>
<option>
<a href=http://nairaland.com style=text
decoration:none;>
Contact
</a>
</option>
</select>
</div>
<div class="clear-float"></div>
I want this to be the third colum by the right,and I
want all colums in the same line
<font align="center">
<i>
&#169; Vstuffs
</i>
</font>
</body>
</html>
Though this is a rough design but it shld achieve wat u want.
Share
Re: Need Help On HTML Code by Vstuffs(op): 10:29pm On Aug 18, 2014
maekhel: to achieve that u must make use of css.
Have edited your code to include the css stylings:

Though this is a rough design but it shld achieve wat u want.
Thanks a lot sir...it works..thanks Very much
Share
Re: Need Help On HTML Code by Vstuffs(op): 10:31pm On Aug 18, 2014
fattbabakay: Do u mean on d same row or column?? Row is horizontal,column is vertical....If it's row,That "align" should work...buh u'll need to toy with the width & margin of d 'div' ...dey shud all av d same width, then manage d margin-left nd margin-right(using percentage for easy calculation)...
Thanks a lot...I will try to edit the code using all this steps to see if I can get different results..but similar design
Share
Re: Need Help On HTML Code by maekhel(m): 10:54pm On Aug 18, 2014
Vstuffs: Thanks a lot sir...it works..thanks Very much
u r welcum, am glad it work for you
Share
Re: Need Help On HTML Code by Djtm(m): 10:54pm On Aug 18, 2014
Set widths for the div blocks, maybe 30% each, then set display to ""inline-block"". You'd need to make use of paddings and margins for it to look nice.
Share
Re: Need Help On HTML Code by PROFLOVY(m): 11:42pm On Aug 18, 2014
Vstuffs: Well I just decided to go back and restart learning html again.....
I wanted to design a small site(kind of a little project)(without adding much css code)....testing stuffs(b/4 I enter css and js

I have a problem
I want the site to be a three column site,but I do not know how to arrange it to be a three colum site(I do not want to use the table tag)
These are the codes I wrote

This is the header

I want this to be the first colum by the left
second colum in the center

I want this to be the third colum by the right,and I want all colums in the same line

Please how do I arrange all this codes in the same line using the div tag and not the table tag
Vsuffs.. Try to make ur codes neater.Maybe you should use an external style sheet…
The radio box will not work..give both ‘yes’ or ‘no’ a name..To make a three column website..

create two divs
1st<div>
</div>...float this to the left...This would be your first column...


2nd<div>
</div>...float this to the right...This would wrap up your second and third columns..

Then make another two divs inside the previous 2nd div...
Float dis also left and right respectively...

<html>
<head>
<title>blah blah</title>
</head>

<body>
<div style="float:left;border:1px solid #000" width="?px" height="?px">
</div>

<div style="float:right;border:1px solid #000" width="?px" height="?px">

<div style="float:left;border:1px solid #000" width="?px" height="?px">
</div>
<div style="float:right;border:1px solid #000" width="?px" height="?px">
</div>


</div>




</body>
</html>

Then put your codes there..you can remove the borders later..
Share
Re: Need Help On HTML Code by Vstuffs(op): 7:09am On Aug 19, 2014
PROFLOVY: Vsuffs.. Try to make ur codes neater.Maybe you should use an external style sheet…
The radio box will not work..give both ‘yes’ or ‘no’ a name..To make a three column website..

create two divs
1st<div>
</div>...float this to the left...This would be your first column...


2nd<div>
</div>...float this to the right...This would wrap up your second and third columns..

Then make another two divs inside the previous 2nd div...
Float dis also left and right respectively...

<html>
<head>
<title>blah blah</title>
</head>

<body>
<div style="float:left;border:1px solid #000" width="?px" height="?px">
</div>

<div style="float:right;border:1px solid #000" width="?px" height="?px">

<div style="float:left;border:1px solid #000" width="?px" height="?px">
</div>
<div style="float:right;border:1px solid #000" width="?px" height="?px">
</div>


</div>




</body>
</html>

Then put your codes there..you can remove the borders later..
Thanks Bro..I will do as instructed
Share
Re: Need Help On HTML Code by Vstuffs(op): 7:10am On Aug 19, 2014
Djtm: Set widths for the div blocks, maybe 30% each, then set display to ""inline-block"". You'd need to make use of paddings and margins for it to look nice.
Thanks Sir......
Share
1 Reply

Drop Ur Site For Help.traffic:advice:html Code(updated • Free New E-book On HTML And CSS • The Html Code For The Naira ₦ Is • 2 • 3 • 4

Has Anyone Used PAYU Payment Gateway? State Your Experience. Is It Safe? • 7 Best Recommended Wordpress Web Hosts • 85,150 Facebook Page Like For Sale (very Engaging, See Photos)