2 divs on same line

[Daniel]

Hi

i have a requirement for the following layout in my masterpage:

1 div for header
1 div for footer

Between those divs i want a div for the left menu, then a div for the
content in the center, then inside each i will place a content holder for
other pages to inherit off

My problem is a div creates a new line? And everyone says not to use tables
anymore, so how do you get that look with css?

Thanks

 

[Laurent Bugnion [MVP]]

Hi,

Hi

i have a requirement for the following layout in my masterpage:

1 div for header
1 div for footer

Between those divs i want a div for the left menu, then a div for the
content in the center, then inside each i will place a content holder for
other pages to inherit off

My problem is a div creates a new line? And everyone says not to use tables
anymore, so how do you get that look with css?

Thanks

You can use SPAN instead of DIV, because they are not block elements, so
they are not placed underneath each other.

Alternatively, you can use the CSS "position" property set to "absolute"
or "relative" to place DIVs outside of their block position.

HTH,
Laurent

 

[Aidy]

Use "float"

<div>
Header
</div>
<div>
<div style="float:left;">
Left
</div>
<div style="float:left;">
Right
</div>
</div>
<div style="clear:both;">
Footer
</div>

The "clear" on the footer means it acts like a normal div and won't float to
the edge of the div before.

 

[Eliyahu Goldin]

If you want to impress someone by having a table-less css layout, be prepare
to spend next few days on learning and practicing.

If you want a simple and reliable solution, use tables.

And yes, by default a div will render on a separate line.

--
Eliyahu Goldin,
Software Developer & Consultant
Microsoft MVP [ASP.NET]
http://msmvps.com/blogs/egoldin
http://usableasp.net

 

[Daniel]

Not looking to impress anyone but i am looking to do things in the
considered 'right way' and stay on top of the present best methods and
techniques.

Thanks for all the help guys.

If you want to impress someone by having a table-less css layout, be
prepare to spend next few days on learning and practicing.

If you want a simple and reliable solution, use tables.

And yes, by default a div will render on a separate line.

--
Eliyahu Goldin,
Software Developer & Consultant
Microsoft MVP [ASP.NET]
http://msmvps.com/blogs/egoldin
http://usableasp.net

Hi

i have a requirement for the following layout in my masterpage:

1 div for header
1 div for footer

Between those divs i want a div for the left menu, then a div for the
content in the center, then inside each i will place a content holder for
other pages to inherit off

My problem is a div creates a new line? And everyone says not to use
tables anymore, so how do you get that look with css?

Thanks

 

[Daniel]

Hi Aidy, used your idea nd it worked.

But when i drop a content placeholder inside the div, it takes up the whole
line again? Any ideas?

 

[Daniel]

Ignore post about the contentholder, it does work.

Ok great all sorted thanks!

 

[Eliyahu Goldin]

For years I have not been able to understand what's wrong with table layout.
May be because I am an application developer as opposed to a web designer.
Tables let your make a simple and neat layout and concentrate on your
application tasks. I guess web designers can achieve more with tableless
css. I prefer to leave it up to them. As far as I, the developer, am
concerned there is no reason to avoid tables.

--
Eliyahu Goldin,
Software Developer & Consultant
Microsoft MVP [ASP.NET]
http://msmvps.com/blogs/egoldin
http://usableasp.net

Not looking to impress anyone but i am looking to do things in the
considered 'right way' and stay on top of the present best methods and
techniques.

Thanks for all the help guys.

If you want to impress someone by having a table-less css layout, be
prepare to spend next few days on learning and practicing.

If you want a simple and reliable solution, use tables.

And yes, by default a div will render on a separate line.

--
Eliyahu Goldin,
Software Developer & Consultant
Microsoft MVP [ASP.NET]
http://msmvps.com/blogs/egoldin
http://usableasp.net

Hi

i have a requirement for the following layout in my masterpage:

1 div for header
1 div for footer

Between those divs i want a div for the left menu, then a div for the
content in the center, then inside each i will place a content holder
for other pages to inherit off

My problem is a div creates a new line? And everyone says not to use
tables anymore, so how do you get that look with css?

Thanks

 

[Daniel]

I am a developer primarily, not a web designer but i am able to do both. I
agree i did all previous sites with table designs and it does seem the new
'best way' changes all the time. But for fear of a new 'All improved IE!'
being released that depricates tables in some form i want to ensure i am
always on the latest techniques because you just never know what the future
holds.

For years I have not been able to understand what's wrong with table
layout. May be because I am an application developer as opposed to a web
designer. Tables let your make a simple and neat layout and concentrate on
your application tasks. I guess web designers can achieve more with
tableless css. I prefer to leave it up to them. As far as I, the
developer, am concerned there is no reason to avoid tables.

--
Eliyahu Goldin,
Software Developer & Consultant
Microsoft MVP [ASP.NET]
http://msmvps.com/blogs/egoldin
http://usableasp.net

Not looking to impress anyone but i am looking to do things in the
considered 'right way' and stay on top of the present best methods and
techniques.

Thanks for all the help guys.

If you want to impress someone by having a table-less css layout, be
prepare to spend next few days on learning and practicing.

If you want a simple and reliable solution, use tables.

And yes, by default a div will render on a separate line.

--
Eliyahu Goldin,
Software Developer & Consultant
Microsoft MVP [ASP.NET]
http://msmvps.com/blogs/egoldin
http://usableasp.net


Hi

i have a requirement for the following layout in my masterpage:

1 div for header
1 div for footer

Between those divs i want a div for the left menu, then a div for the
content in the center, then inside each i will place a content holder
for other pages to inherit off

My problem is a div creates a new line? And everyone says not to use
tables anymore, so how do you get that look with css?

Thanks

 

[Mark Rae]

For years I have not been able to understand what's wrong with table
layout. May be because I am an application developer as opposed to a web
designer. Tables let your make a simple and neat layout and concentrate on
your application tasks. I guess web designers can achieve more with
tableless css. I prefer to leave it up to them. As far as I, the
developer, am concerned there is no reason to avoid tables.

I couldn't agree more!

 

[Patrice]

Tables won't be deprecated.

Tables (when used as a way to perform the overall layout) are quite rigid
and generally obscurs a bit the HTML source for the document.
Divs are likely more difficult to get right but you can change easily the
position without changing the HTML structure.

You'll see numerous discussions abotu their respective avantage/disavantage.

My intention is not to start yet another useless discussion. Just pick the
design your prefer...

---
Patrice

I am a developer primarily, not a web designer but i am able to do both. I
agree i did all previous sites with table designs and it does seem the new
'best way' changes all the time. But for fear of a new 'All improved IE!'
being released that depricates tables in some form i want to ensure i am
always on the latest techniques because you just never know what the future
holds.

For years I have not been able to understand what's wrong with table
layout. May be because I am an application developer as opposed to a web
designer. Tables let your make a simple and neat layout and concentrate
on your application tasks. I guess web designers can achieve more with
tableless css. I prefer to leave it up to them. As far as I, the
developer, am concerned there is no reason to avoid tables.

--
Eliyahu Goldin,
Software Developer & Consultant
Microsoft MVP [ASP.NET]
http://msmvps.com/blogs/egoldin
http://usableasp.net

Not looking to impress anyone but i am looking to do things in the
considered 'right way' and stay on top of the present best methods and
techniques.

Thanks for all the help guys.



message If you want to impress someone by having a table-less css layout, be
prepare to spend next few days on learning and practicing.

If you want a simple and reliable solution, use tables.

And yes, by default a div will render on a separate line.

--
Eliyahu Goldin,
Software Developer & Consultant
Microsoft MVP [ASP.NET]
http://msmvps.com/blogs/egoldin
http://usableasp.net


Hi

i have a requirement for the following layout in my masterpage:

1 div for header
1 div for footer

Between those divs i want a div for the left menu, then a div for the
content in the center, then inside each i will place a content holder
for other pages to inherit off

My problem is a div creates a new line? And everyone says not to use
tables anymore, so how do you get that look with css?

Thanks

 

[Anthony Jones]

I am a developer primarily, not a web designer but i am able to do both. I
agree i did all previous sites with table designs and it does seem the new
'best way' changes all the time. But for fear of a new 'All improved IE!'
being released that depricates tables in some form i want to ensure i am
always on the latest techniques because you just never know what the future
holds.

MS may have clout but I doubt even thye could deprecate tables even if they
wanted to.

Web developers and Application Developers have different goals. Web
Developers are primarily interested in delivering content in an engaging and
appealing way. They are interested in divorcing as much as possible the
content itself from the presentation. CSS is a big help there.

Application developers are delivering a UI in the sense that there is little
distinction between presentation and content its all just the UI. There is
greater emphasis on behaviour and input which in web development (apart from
navigation) is negligable.

What is best practice in Web Development may not be best practice in
Application Development.

 

[Daniel]

"But for fear of a new 'All improved IE!'
being released that depricates tables in some form i want to ensure i am
always on the latest techniques because you just never know what the future
holds."

Importand words : "for fear of" and "in some form". I am not sayin they will
be depricated, just over stating my point that i prefer, personally, to do
what the crowd seem to be doing at any time...just in case.

 

[David Wier]

Just like they say about paranoia - just because you're paranoid, doesn't
mean they're not out to get you.
So - remember, just because it's deprecated, doesn't mean it doesn't work!
(remember backwards compatibility)

 

[Laurent Bugnion [MVP]]

Hi,

"But for fear of a new 'All improved IE!'
being released that depricates tables in some form i want to ensure i am
always on the latest techniques because you just never know what the future
holds."

Importand words : "for fear of" and "in some form". I am not sayin they will
be depricated, just over stating my point that i prefer, personally, to do
what the crowd seem to be doing at any time...just in case.

No shame in educating yourself. The best is to master both techniques
and to be able to choose the most suitable one given the project's
circumstances.

For example, mobile or older browsers often don't support CSS
positioning, in which case tables are useful. The more tools you master,
the more efficient you're as a software developer.

Greetings,
Laurent