DIV question

Paul Tomasi
Paul Tomasi used Ask the Experts™
on
If I have a header at the top of a page created using DIV, and I want to place a logo image to the left and text (phone number) to the right, do I need to define and use two seperate embedded DIVs?

And how would I position them? And can I make them relative to the 'header' region instead of the page itself?
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®

Author

Commented:
Or, should I use a table inside the header DIV to create 2 side-by-side regions?

Author

Commented:
I was able to do it using a 2-col single-row table...
Commented:
Check it:
<div id="header">
<img src="" alt="" />
<p>wdagjyt
123456789</p>
</div>

<style>
#header {width:800px;}
#header img {float:left; width:50%;}
#header p {float:right; width:50%;}
</style>

Open in new window

Success in ‘20 With a Profitable Pricing Strategy

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!

Commented:
Use table only when you need to show table with values. Using table for layout is out-of-date.

Author

Commented:
SSupreme

Thank you for your reply.

Will implement your suggestion and confirm...
It is good that you place the header in the background.
the text which you want in the left you place as float:left and
which you want in the right you place as float:right

it will help you.

thanks..

Commented:
As I mentioned earlier.

Author

Commented:
Okay, I've tried so hard to put a site together using DIVs I've abandoned them in favour of tables for now.

I will award point regardless and accordingly.
<div id="header">
<img src="phone_icon.jpg" alt="phone" />
<p>Ph : 9990033237</p>
</div>

<style>
#header {width:800px;}
#header img {float:left; width:50%;}
#header p {float:right; width:50%;text-align:right;}
</style>

Commented:
amitlamba, what are you doing? spamming?

Author

Commented:
amitlamba

I didn't know you could that. I love the idea of #header img... and #header p... to define styles relative to DIVs whose ID is 'header'.

Your simplified solution has made a few things clearer to me (okay, call me a 'newbie'...).

Looking at your code, I think the key element is the 'float:left' and 'float:right'...

I can't understand why I did not pick this up when looking at SSupreme's code (which is almost identical to your own). Maybe it's because at the time I didn't know what to look for at the time.

Thank you for your effort and time. Pity I cannot give you points too.
Commented:
What is the question than?
it is good that you call the header image in the background and all the logo image and phone number you can just type in the header div.
also you can give the link in the logo

i think it will help you..
thanks.

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial