...

View Full Version : line break between <div>



hmvrulz
01-13-2008, 09:02 AM
below is two pieces of DIV code one for the left and other for the right.. i wil want to repeat these boxes twice or thrice...When i do it... I am not able to give a space between the two or three sets... the borders overlap.. Since i have give boders i want those to be distint for all the boxes... of all sets.. have attached the css code also


<div id="boxleft">
<h2>The idea behind the design</h2>
<p>When it was time to redesign one of my sites, I got an idea about making one single design that all of my sites could use, and make some kind of official link network between the sites. My way of doing this turned out to be the use of toptabs (for selecting a website) and navitabs (for selecting subsections within the different sites). With a basic PHP template, all sites could now have the same design and share the same toptabs - but they can have their own separate content. If needed, each navitab can have a submenu in the sidebar, which allows this design to handle hundreds of pages while still keeping a quick and easy navigation. To make navigation more logical, each tab could have its own colorscheme or header image.</p>
<p class="block"><strong>Please note:</strong> This template is built with XHTML and CSS code only. It contains no CMS-specific code. It may be customized to work with many different content management systems, but that will require additional programming.</p>
</div>
<div id="boxright">
<h2>The idea behind the design</h2>
<p>When it was time to redesign one of my sites, I got an idea about making one single design that all of my sites could use, and make some kind of official link network between the sites. My way of doing this turned out to be the use of toptabs (for selecting a website) and navitabs (for selecting subsections within the different sites). With a basic PHP template, all sites could now have the same design and share the same toptabs - but they can have their own separate content. If needed, each navitab can have a submenu in the sidebar, which allows this design to handle hundreds of pages while still keeping a quick and easy navigation. To make navigation more logical, each tab could have its own colorscheme or header image.</p>
<p class="block"><strong>Please note:</strong> This template is built with XHTML and CSS code only. It contains no CMS-specific code. It may be customized to work with many different content management systems, but that will require additional programming.</p>
</div>


#boxleft {
float:left;
width:46%;
border:1px solid #d8d8d8;
padding:5px 10px 0 10px;
border-bottom:0px;
}


#boxright {
float:right;
width:46%;
border:1px solid #d8d8d8;
border-bottom:0px;
padding:5px 10px 0 10px;
}

and please tell me how to space the two adjacent boxes with a very small space between them... i ahve used a tril and error % factor to do it rite now...
is there a better way to do it ??

When these boxes repeat the borders overlap... how to make it give a line break... <br/> didnt help

hmvrulz
01-13-2008, 09:44 AM
Sorry... i founnd the Solution

<br clear="all" />


may be use full for others...
this code clears and make a line break



Syntax <BR>
Attribute Specifications

* CLEAR=[ left | all | right | none ] (clear floating objects)
* core attributes

Contents Empty
Contained in Inline elements, block-level elements


Details

The BR element forces a break in the current line of text. BR can be useful in formatting addresses within the ADDRESS element, but it is often misused to break lines of text in a paragraph or table cell when it looks "nice" to the author. This usually results in an awkward presentation when viewed with a font size other than that used by the author.

The CLEAR attribute of BR is used to move below floating objects (typically images or tables). In the following example, the second paragraph should be rendered below the floating image:

<P><IMG SRC="toronto.jpg" ALIGN=left ALT="" TITLE="Toronto's CN Tower">Toronto is the largest city in Canada and the fourth largest in North America.</P>
<BR CLEAR=left>
<P>The city is highly multicultural, with over 80 ethnic communities from Africa, Asia, and Europe...

Style sheets provide more flexibility in controlling text flow around objects and eliminate the need to use BR for this purpose since CSS1's clear property can be applied to any element (such as the second paragraph in the preceding example).

abduraooft
01-13-2008, 10:39 AM
clear= is depreciated. have a look at http://www.w3.org/TR/html4/present/graphics.html#adef-clear

Use its equivalent style style="clear:both"
http://www.w3schools.com/htmldom/prop_style_clear.asp



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum