Html code question.

**Gh0st1234** · 01-07-2013, 08:45 AM

What is the html code to make horizontal boxes i need to make some boxes go from left to right but all i can find is on top of each other, you can see example here <a href="http://www.carinsurancequotesinformation.com">car insurance quotes</a> where the boxes are next to each other, and will this affect the page width on my site.

Someone told me use DIV tags but how do i put this in HTML code?.

**MrTuthaus** · 01-07-2013, 09:11 AM

Originally Posted by Gh0st1234

What is the html code to make horizontal boxes i need to make some boxes go from left to right but all i can find is on top of each other, you can see example here <a onclick="_gaq.push(['_trackEvent', 'Outgoing', 'www.carinsurancequotesinformation.com"', '']);" rel="nofollow" href="http://www.carinsurancequotesinformation.com">car insurance quotes</a> where the boxes are next to each other, and will this affect the page width on my site.

Someone told me use DIV tags but how do i put this in HTML code?.

send me ur codes to mrtuthaus@gmail.com

**fon&fun** · 01-07-2013, 11:22 AM

Originally Posted by Gh0st1234

What is the html code to make horizontal boxes i need to make some boxes go from left to right but all i can find is on top of each other, you can see example here <a onclick="_gaq.push(['_trackEvent', 'Outgoing', 'www.carinsurancequotesinformation.com"', '']);" rel="nofollow" href="http://www.carinsurancequotesinformation.com">car insurance quotes</a> where the boxes are next to each other, and will this affect the page width on my site.

Someone told me use DIV tags but how do i put this in HTML code?.

Try to use this tool HTML EDITOR

**slkmclaren** · 01-07-2013, 02:19 PM

Originally Posted by Gh0st1234

What is the html code to make horizontal boxes i need to make some boxes go from left to right but all i can find is on top of each other, you can see example here <a onclick="_gaq.push(['_trackEvent', 'Outgoing', 'www.carinsurancequotesinformation.com"', '']);" rel="nofollow" href="http://www.carinsurancequotesinformation.com">car insurance quotes</a> where the boxes are next to each other, and will this affect the page width on my site.

Someone told me use DIV tags but how do i put this in HTML code?.

to fully implement this kind of boxes, you need to have a understanding of CSS.

**neo_nine** · 01-07-2013, 02:25 PM

in your div gamiti ug class so
<div class="boxes">
1
</div>
<div class="boxes">
2
</div>

then sa css gamiti ug float:left na rule so
.boxes{
float:left;
}

then iadjust nalang ang margins, width, and paddings as you see fit

**fon&fun** · 01-07-2013, 03:00 PM

ug gusto kag Notification Box..here is the css and html code..

CSS:

Code:

.tip {
text-decoration: blink;
background: #FFC url(https://lh5.googleusercontent.com/-sRX_pcKj5V0/UK8LgCVZanI/
AAAAAAAAG84/-Pst-ZgY36k/s32/notification.png) center no-repeat;
margin: 0 auto;
width: 90%;
display: block;
border: 1px solid #D5B900;
background-position: 7px 50%;
padding: 10px 10px 10px 45px;
vertical-align: text-top !important;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
.tip:hover{
 box-shadow: 0 0 5px 2px rgba(0,0,0,.35);
}

HTML CODE:

HTML Code:

<div class="tip"><blink>Note:- </blink>YOUR TEXT HERE</div>

View the full tut here:

HTML Code:

http://bloggers-hero.blogspot.com/2012/11/notification-box-for-blogger.html

**cjmagowan** · 01-10-2013, 05:52 AM

gamit kag div tags sir then set class

then do the floating of div boxes via css..

d man nko ma.open imo gi.hatag na site

sample effect: ingon ani ?

**blackdream** · 01-10-2013, 08:41 AM

Try no bro oh, 2-4columns...

Code:

<html>

<head>

<style>

body
{
	margin:0px;
	font:14px Georgia, "Times New Roman", Times, serif;
}

div.two-columns-boxes
{
	width:50%;
	float:left;
}

div.three-columns-boxes
{
	width:33.33%;/*Working both ff & chrome*/
	float:left;
}

div.four-columns-boxes
{
	width:25%;
	float:left;
}

.style999
{
	background:#f0f0f0;
}

.style888
{
	background:#ccc;
}

.style777
{
	background:#999;
}

.style666
{
	background:#888;
}

.clr
{
	clear:both;
}

</style>

</head>

<body>
	
	<div class="clr"></div>
	<div class="two-columns-boxes style999">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus eu felis augue, sit amet consectetur orci. </div>
	<div class="two-columns-boxes style888">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus eu felis augue, sit amet consectetur orci. </div>
	<div class="clr"></div>
    
	<div class="three-columns-boxes style777">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus eu felis augue, sit amet consectetur orci. </div>
	<div class="three-columns-boxes style666">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus eu felis augue, sit amet consectetur orci. </div>
	<div class="three-columns-boxes style999">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus eu felis augue, sit amet consectetur orci. </div>
	<div class="clr"></div>
    
	<div class="four-columns-boxes style888">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus eu felis augue, sit amet consectetur orci. </div>
	<div class="four-columns-boxes style777">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus eu felis augue, sit amet consectetur orci. </div>
	<div class="four-columns-boxes style666">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus eu felis augue, sit amet consectetur orci. </div>
	<div class="four-columns-boxes style999">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus eu felis augue, sit amet consectetur orci. </div>
	<div class="clr"></div>

</body>

</html>

**jeneferlopez7** · 01-10-2013, 08:01 PM

What do you mean?
If you know about div tag you can use it. i.e

color:black IS font color;

<div style="height : 400px; weight:700px; background-color:red; color:black" >
now you can write any content here even full div code also.
</div>
<div style="height : 400px; weight:700px; background-color:red; color:black" >
now you can write any content here even full div code also.
NOW DIV UNDER DIV(CHILD DIV)
<div style="height : 400px; weight:700px; background-color:red; color:black" >
now you can write any content here even full div code also.
</div>
</div>

absolutetoner.com

**Istudyante-Ni-Pikoy** · 01-12-2013, 08:00 AM

Try daw this
<div id=”container”>

<div style="clear:both"></div>
<div id=”left”>
For the left box
</div>
<div id=”right”>
For the right box
</div>
<div style="clear:both"></div>

</div> (End of container, do not include this line)

----------To you CSS file------------
#container{
Width:auto;
Height:auto;
}
#left{
Width:50px;
Height:50px;
Float:left;
}
#right{
Width:50px;
Height:50px;
Float:right;

}

Thread: Html code question.

Thread Tools

Search Thread