Break Tags in DIVs

JonathanAnon

Hi there,

I know tables like the back of my hand, but trying to make the move to DIVs and using CSS... First stumbling block I've come up against is try to use a break tag withing a DIV.. it has the effect of starting a new row... I have it defined similar to below

<div id="mainbox">


<div id="divsmallbox">
<img src="image1.jpg">
</div>

<div id="divsmallbox">
<img src="image2.jpg">
</div>

<div id="divsmallbox">
<img src="image3.jpg">
</div>

<div id="divsmallbox">
Piece of text<br />
another piece of text<br />
</div>


</div>

When I just have the three smallbox divs it works fine, but when I introduce the fourth smallbox div with text inside, then it acts similar to a </tr> in tables.

#divsmallbox{
display:inline;
padding-top:40px;
padding-left:0px;
padding-right:0px;
padding-bottom:0px;
text-align:top;
padding:0px;
margin:0px;
}

Can anybody help.. thanks.

Niall09

That's exactly what a <br /> tag does, it breaks the line and goes to the next one. I'm a bit confused as to what exactly you are trying to achieve?

carveone

By the way, is it possible you mean to use class instead of id? Each id needs to be unique within the DOM. Your example is not right in that respect.

But yeah, as Niall09 says, a br tag does a line break - starts a new row.

28064212

1. You should definitely have divsmallbox as a class, not an id
2. Your CSS contains a padding-top of 40px, but it's overwritten by the overall padding: 0 declaration
3. You're also getting into a bit of unecessary "div soup", there's no real need for a div containing nothing but an image, just dump the div and apply your CSS to the img directly

As to your specific problem, you want to be using float: left instead of display: inline. Inline means that the divs are placed in the normal flow of the text. When you use a <br> inside one of them, because the previous divs are all inline, the new text just goes back to the start of the line

DonkeyStyle \o/

JonathanAnon wrote: »

trying to make the move to DIVs and using CSS

Well stay strong, once you have it sussed you'll love it more than tables.
I found the transition pretty head-wrecking, especially that first time you make exactly the layout you want without using any tables... then you load it in IE6 and start crying.
It's better to forget everything you know about laying things out with tables, because it doesn't help at all with CSS, if anything it'll just confuse you, it's a completely different way of thinking about things. Just start from scratch and go through some tutorials on w3cschools.

The number one pointer I'd give you is to put borders on everything, div's, li's p's, anything and everything. It gives you a much better sense of why things are appearing the way they are.
Second thing is learn about floats. (float: left; (etc.))

stevenmu

DonkeyStyle \o/ wrote: »

The number one pointer I'd give you is to put borders on everything, div's, li's p's, anything and everything. It gives you a much better sense of why things are appearing the way they are.
Second thing is learn about floats. (float: left; (etc.))

+1, and don't be afraid to set really horrible garish background colours for your divs (and other elements) as well, they can help see why things go where too.

Malice

Just remember to remove the borders and garish colours before release (unless they are an intended part of your design).

Giblet

Malice wrote: »

Just remember to remove the borders and garish colours before release (unless they are an intended part of your design).

Ah, brings me back to a release when this happened because a designer needed to outline everything...

stevenmu

That's why I was clear to say garish colours, you really want to be using the kind of luminous greens and pinks that make it clear to everyone that they're not meant to be included in a release. Unless you're the kind of designer who would use those colours on a real site,in which case you deserve everything you get

Feathers

stevenmu wrote: »

+1, and don't be afraid to set really horrible garish background colours for your divs (and other elements) as well, they can help see why things go where too.

Web Developer Toolbar is your friend. Outline > Outline Custom Elements & you can specify up to 6 CSS Selectors to outline & what colour for each. Means no surprises when you go to release

OP, also — download Firebug for Firefox. It allows you to change the CSS within the webpage & the page will reflect the changes in real-time. Cannot recommend both of these plugins enough.

conor.hogan.2

Or use the inspector in Chrome (or Safari)

Steve

Malice wrote: »

(unless they are an intended part of your design).

Sometimes, they're not intended but must remain...
http://theoatmeal.com/comics/design_hell