[OT] <div> <span>

[Rob Meade]

Hi all,

Apologies for the OT-ness of the post, I've only got access to Microsoft
groups via Outlook at work and SiteServer.Css looks like its dead....

I'm trying to get two columns within a <div> tag - I seem to be having no
end of problems doing so - this all comes from dropping (finally) the table
approach for displaying non-tabular data...

I've managed to use <div>'s for the header section and footer section, but
as soon as I try to get two columns between these they seem to wrap...

I've not found a lot of help on Google, wondered if anyone here might have
done something similar for their own site...

<div style="width:100%">
<div style="width:50%">column 1</div>
<div style="width:50%">column 2</div>
</div>

The above is an example of what I'm trying to achieve, I read somewhere
about the <div> tags breaking <p> tags, ie, creating a new paragraph/line -
so I've amended the inner tags to <span>'s but still no joy..just doesn't
seem to work...

If anyone has a "tiny" example of the above I'd be very grateful - for what
its worth, but column 1 and column 2 are being generated dynamically and
contain additional <div>'s..

Thanks for any help and again my apologies for the OT-ness (cant access
Google groups from work either)..

Rob

 

[CJM]

I've managed to use <div>'s for the header section and footer section, but
as soon as I try to get two columns between these they seem to wrap...

I've not found a lot of help on Google, wondered if anyone here might have
done something similar for their own site...

<div style="width:100%">
<div style="width:50%">column 1</div>
<div style="width:50%">column 2</div>
</div>

The above is an example of what I'm trying to achieve, I read somewhere
about the <div> tags breaking <p> tags, ie, creating a new
paragraph/line - so I've amended the inner tags to <span>'s but still no
joy..just doesn't seem to work...

Do you have a URL that demonstrates the problem? What exactly are the
symptoms?

 

[Mike Brind]

Hi all,

Apologies for the OT-ness of the post, I've only got access to Microsoft
groups via Outlook at work and SiteServer.Css looks like its dead....

I'm trying to get two columns within a <div> tag - I seem to be having no
end of problems doing so - this all comes from dropping (finally) the table
approach for displaying non-tabular data...

I've managed to use <div>'s for the header section and footer section, but
as soon as I try to get two columns between these they seem to wrap...

I've not found a lot of help on Google, wondered if anyone here might have
done something similar for their own site...

<div style="width:100%">
<div style="width:50%">column 1</div>
<div style="width:50%">column 2</div>
</div>

The above is an example of what I'm trying to achieve, I read somewhere
about the <div> tags breaking <p> tags, ie, creating a new paragraph/line -
so I've amended the inner tags to <span>'s but still no joy..just doesn't
seem to work...

If anyone has a "tiny" example of the above I'd be very grateful - for what
its worth, but column 1 and column 2 are being generated dynamically and
contain additional <div>'s..

Thanks for any help and again my apologies for the OT-ness (cant access
Google groups from work either)..

<div style="width:100%">
<div style="width:50%;float:left;"><p>column 1</p></div>
<div style="width:50%;float:left;"><p>column 2</p></div>
</div>

I wondered why our mail server was so slow yesterday, and then found
out that someone was using the intranet in peak hours to send 13,000
html emails (which eventually took 9 hrs to clear). Each email
contained 28 kB of html, put together by our dezyner using tables and
spacer gifs. I rewrote the html for this newsletter thingy, using CSS
and divs. Identical result - 12 kB. I just saved 60% or our bandwidth
costs for future mailings. Stick with this approach. It's worth it.

Start here: http://www.glish.com/css/ then here:
http://www.google.co.uk/search?hl=en&safe=off&q=css+layout&btnG=Search&meta=

--
Mike Brind

PS. I rewrote the html AFTER amending the mailing script to check the
quantity of email addresses in a campaign and the time of day. Before
4.30pm for large campaigns, it now tells the user to get lost.

 

[Rob Meade]

...

Do you have a URL that demonstrates the problem? What exactly are the
symptoms?

Alas nope as its on our intranet..however...

I found a couple of articles on line, and similar to the example posted up
by Mike Brind, I had something together, the problem is that I cant make it
pixel perfect, ie, if I have a container with a width of 500px, and a left
column of 155px, I cant make the second column 345px or else they over
lap...and the border disappears...its a minor thing but I'm confronted with
the problem of not only make a page that validates, is accessible, looks
good, uses less bandwidth, but has to also be easy for the rest of my team
to incorporate and use or else I'm just wasting my time - they all
understand tables, so teach old dogs new tricks could be tricky...

What I have got is the code though....so here you go.....I should add that
the majority of this is all from the example I found online, I've just
amended the .css files and added a couple of extra divs for spacing to make
it look more like our template...


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Template</title>
<link rel="stylesheet" type="text/css" href="2c-hd-ft-fixed-layout.css" />
<link rel="stylesheet" type="text/css"
href="2c-hd-ft-fixed-presentation.css" />
</head>
<body>
<div id="outer">
<div id="hdr"></div>
<div id="bar"><img src="Images/Misc/Shim.gif"
style="width:1px;height:15px;border-width:0px;" alt="" title="" /></div>
<div style="height:2px"><img src="Images/Misc/Shim.gif"
style="width:1px;height:1px;border-width:0px;" alt="" title="" /></div>
<div id="bodyblock" align="right">
<div id="l-col" align="center">
<h4 align="center">Menu</h4>
<a href="#">Link</a><br />
<br />
<a href="http://www.ssi-developer.net/main/templates/">View more
templates.</a>
</div>
<div id="cont">
<h3 align="center">Two Column Fixed Width with Header &amp;Footer</h3>
<div align="center" style="color: red;">Ver 2.3</div>
<p>This template is actually a replica of one of my other
websites which uses tables for the very same layout. I wanted to
see could it be done and it seems to work perfect.</p>
<p>This is basically set up as follows: there is a main outer div
which centers the page and is a fixed width. There are 4 main
div's within this outer div; header (#hdr), bar (#bar), body
(#body) and footer (#ftr). The body div holds 2 more divs, the
left div which is for navigation and the right div which is for
our content.</p><p>This template is actually a replica of one of my other
websites which uses tables for the very same layout. I wanted to
see could it be done and it seems to work perfect.</p>
<p>This is basically set up as follows: there is a main outer div
which centers the page and is a fixed width. There are 4 main
div's within this outer div; header (#hdr), bar (#bar), body
(#body) and footer (#ftr). The body div holds 2 more divs, the
left div which is for navigation and the right div which is for
our content.</p>
</div>
</div>
<div style="height:2px"><img src="Images/Misc/Shim.gif"
style="width:1px;height:1px;border-width:0px;" alt="" title="" /></div>
<div id="ftr"><img src="Images/Misc/Shim.gif"
style="width:1px;height:15px;border-width:0px;" alt="" title="" /></div>
</div>

</body>
</html>

And the .css's...

2c-hd-ft-fixed-layout.css
/* Layout Stylesheet */

body {
margin:20px;
background:#ffffff;
color: #333333;
text-align:center;
padding:0;
}

#outer {
text-align:left;
width:650px;
margin:auto;
border-width: 0px;
border-style: collapse;
}

#hdr {
height:60px;
background:#ffffff;
color: #333333;
}

#bar {
height:15px;
background:#6699cc;
color: #333333;
}

#bodyblock {
position:relative;
background: #f1f1f1;
color: #000000;
width:650px;
padding:0;
}

#l-col {
float:left;
background:#f1f1f1;
color: #000000;
width:150px; /* needs to be 1px narrower than remaining space to allow for
border-width of #cont*/
}

#cont {
width:495px;
background:#ffffff;
color: #333333;
border:solid #999999;
border-width:0 0 0 1px;
text-align:justify;
}

#ftr {
height:15px;
background:#6699cc;
color: #333333;
margin:0;
}


2c-hd-ft-fixed-presentation.css


/* Presentation Stylesheet */

h3, p {
margin:0;
padding:15px;
}

h4 {
margin:0;
padding: 5px 0;
}

p:first-letter {
font-size: 80%;
font-weight: bold;
color:blue;
}

 

[Mike Brind]

...


Alas nope as its on our intranet..however...

I found a couple of articles on line, and similar to the example posted up
by Mike Brind, I had something together, the problem is that I cant make it
pixel perfect, ie, if I have a container with a width of 500px, and a left
column of 155px, I cant make the second column 345px or else they over
lap...and the border disappears...

Set all margins, paddings and borders to 0 to start, then as you add
10px padding here, compensate by removing 10px width from your div
there...

It can get a bit frustrating to see overlapping divs, or the right hand
one popping under the left hand one, but eventually you get the hang of
it. Trial and Error. Get your hands dirty. Just like ASP/ADO/SQL.
Oh, and check your results in both Firefox *and* IE. They implement
the CSS box model differently.

 

[Dave Anderson]

Oh, and check your results in both Firefox *and* IE.
They implement the CSS box model differently.

And IE7 implements it differently from IE6, at least under strict DOCTYPEs.

 

[Rob Meade]

...

Set all margins, paddings and borders to 0 to start, then as you add
10px padding here, compensate by removing 10px width from your div
there...

Thanks for the advice, the problem with the example I've posted the code up
for is that, unless I make the items in the container use it seems at least
5px less, it just doesn't work, either I get no border at the top on the
left (roughly the first paragraph of text), or, none at the bottom, to get
both I seem to have to make the contained items considerably less than the
container width?

It can get a bit frustrating to see overlapping divs,
init!

or the right hand
one popping under the left hand one, but eventually you get the hang of
it. Trial and Error. Get your hands dirty. Just like ASP/ADO/SQL.

yeah...I guess, just was hoping for quicker results....

Oh, and check your results in both Firefox *and* IE. They implement
the CSS box model differently.

deffo - I work for the NHS, which is where these templates will be used, our
Trust (organisation) has the luxury of being Microsoft only, so I know that
people will only be using Internet Explorer, and version 5+, HOWEVER - we
also make community wide applications using similar templates which are then
used by GP practices and other Trusts, whilst the NHS as a whole does have
an agreement with Microsoft thus we get lots of goodies for free, there are
still some users out there - I'm sure you know the ones - that like to
fiddle - as such we've had reports from users that our applications do not
work correctly in FireFox (especially the .Net ones) - I am trying to
appease all here by developing the templates to work correctly with FireFox,
and then AFTERWARDS checking them in IE, as opposed to the other way round
which was always the mindset in the past. I figure if I get it right for
FireFox my code should be "correct" (I'm validating via W3C etc) - but at
the end of the day, the bulk of the users are all IE users so if there are
any things I just cant work out I'll obviously have to favour them....this
has been a good exercise though because not only have I started creating
Server Controls in .Net (something new for me) - I've started using the DIV
tags (something new for me) - and have seen the size of my pages reduce
quite a bit (by 2 thirds on one of the pages!)...

It's just a shame that now, after the W3C has been around so long that all
of the browsers haven't adapted the same consistant use of the standards, it
would make things so much easier for us as developers, and thus have a big
advantage to users, as it wouldn't matter which browser they used they could
be assured of the same results, browsers would then compete on features..

Regards

Rob

 

[Rob Meade]

...

And IE7 implements it differently from IE6, at least under strict
DOCTYPEs.

We've already had reports that some of our ASP apps dont work in IE7 -
joy...not sure why, probably because of the popup whoring techniques we've
used in the past, my understanding of IE7 (limited as it is) is that it now
has tabs, much like FireFox? If so, I would imagine our popups are appearing
as new tabs...again, playing our "not supported" card at the moment, but
something else we're going to have to consider...

Perhaps its time to get out of this business! )

Rob

 

[Rob Meade]

...

LOL.
)

If ever there were a time to get out of this business, it was when
browsers were moving AWAY FROM each other, rather than TOWARD (NN4/IE4 was
probably the most divergent point). The current trend is toward standards,
and that can only make our jobs easier in the long run.

hehe, true - just be nice if we could sit them all down in a room, bash some
heads together and get them all to develop new version over night that did
everything the same - that way, on Monday I could have something consistant
to use! )

Rob