Welcome, Guest: Register On Nairaland / LOGIN! / Trending / Recent / New
Stats: 3,153,086 members, 7,818,257 topics. Date: Sunday, 05 May 2024 at 11:18 AM

Why Float Instead Of Using Coordinates (top And Left) - Webmasters - Nairaland

Nairaland Forum / Science/Technology / Webmasters / Why Float Instead Of Using Coordinates (top And Left) (1992 Views)

7 Golden Rules That Left Adsense With A “yes” Option To Me [ Life Experience ] / Are You Making Enough Money From Adsense? Try This Instead. / What Are The Advantages And Disadvantages Of Using Table For Layout (2) (3) (4)

(1) (2) (Reply) (Go Down)

Why Float Instead Of Using Coordinates (top And Left) by lanbaba: 7:08pm On Jan 06, 2010
why float instead of using coordinates (top and left) in css positioning. (ie advantages of floating), what are the possible difficulties that one would encounter while trying to float. cos am yet to fully a\understand it,
Re: Why Float Instead Of Using Coordinates (top And Left) by yawatide(f): 7:43pm On Jan 06, 2010
floating and positioning, either way can be done. however, IMHO, floating is easier. The main "difficulty" in floating is that you will need to "clear" the float when you are done otherwise the floated DIVs (for example) will "bleed" through the elements below it. Another difficulty is if you have margins or paddings around the DIVs. You will need to compensate for these, courtesy of the box model otherwise, your floated DIVs will appear one below the other.

Good floating example (please note that I am using inline stylesheet for illustration purposes and it isn't advised in actual code. Just plug-and-play my example):


<div id="container">
<div id="A" style="float: left;">blah<div>
<div id="B" style="float: left;">blah blah<div>
<br style="clear: both;" />
</div>


Now, back to the box model:
If container is 500px and A and B are each 250px but B for example has a left margin (for spacing reasons) of 10px, B will show below A. Why? Because now the total width of A and B is now 250px + 250px + 10px = 510px. To fix it, you will need to either subtract 10px from A or 10px from B to restore equilibrium so that both DIVs can appear side-by-side.

Make sense?
Re: Why Float Instead Of Using Coordinates (top And Left) by lanbaba: 8:57pm On Jan 06, 2010
thanks, so clear, but if that container is for example a side bar, do u have to now position the container using absolute positioning (top and left) or u can float the header(logo, menu etc) section and allow it (sidebar) to wrap round it, if you can do this, then let us assume the first element /container on your page is the header(logo ,menu etc) (you will float it, then clear other containers like sidebar around it), do you position the header(logo, menu etc) with absolute positioning else how do you do it?
Re: Why Float Instead Of Using Coordinates (top And Left) by yawatide(f): 9:37pm On Jan 06, 2010
glad to know you are understanding so far.

This is how I like to code my pages:
Overall container -> header->navigation->left column (floated) -> right column (floated) -> footer

code:

<div id="container" style="width: 498px; border: 1px solid green;">
    <div id="header" style="width: 498px; border: 1px solid red;">header</div>
    <div id="navigation" style="width: 498px; border: 1px solid purple;">navigation</div>
    <div id="content-container" style="width: 498px; border: 1px solid yellow;">
        <div id="A" style="float: left; width: 248px; border: 1px solid orange;"">blah<div>
        <div id="B" style="float: left; width: 248px; border: 1px solid orange;"">blah blah<div>
        <br style="clear: both;" />
    </div>
    <div id="footer"style="width: 498px; border: 1px solid blue;">footer</div>
</div>

Of course there are 1001 ways to skin a cat.  In conclusion, I only use containers to:
1) wrap around the entire layout
2) wrap around floated DIVs (I rarely use positioning as it can get tricky, especially if users decide expand their windows for example

No matter your layout, you can modify the above to suit your needs.

Make sense?
Re: Why Float Instead Of Using Coordinates (top And Left) by lanbaba: 10:05pm On Jan 06, 2010
what i understand by floating is:
if u say a div1 1s <div style="float:left">, and say another div,call it<div 2> follows in the code, it means that 1(the one with style="left:float"wink is at the left of 2, if am wrong pls correct, in the light of this, pls explain the code you wrote further
Re: Why Float Instead Of Using Coordinates (top And Left) by yawatide(f): 10:45pm On Jan 06, 2010
You are right, per your understanding. to explain my code above:

Imagine you have 1 carton open on either side. The carton is "container". Now imagine you have a pack of whot cards. You take one and place it at the bottom of the carton. That is "footer". You take another 2 and place them on either side, on top of the "footer". Those are your 2 floated DIVs. You then place a card on top of the 2. That is your navigation. You take yet another and place it on top of your "navigation". That is your "header".

Make sense?
Re: Why Float Instead Of Using Coordinates (top And Left) by lanbaba: 11:08pm On Jan 06, 2010
pls take a look at the code below,
there are two parts.


<!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">

<html>
<head>

<style>
body {margin:0px; padding:0px; }
.withborder {border-style:solid; border-color:grey; }
</style>
</head>

<body>

<!-part 1-->
<div class="withborder" style="float:left; padding:3px; width:200px; height:auto; margin-left:200px;">
<p class="withborder" style="">As is usual wi</p>

<p class="withborder" >God is verposition:relative; position:relative; <p/>

<p class="withborder" >lanre As is usual with positioned below a
floating element, use clear.</p>

</div> <!--end of part1-->



<!--beginning of part 2-->
<div class="withborder" style="">
people text andth CSS (and impossible in traditional HTML), you can apply the
clear property to any element, not just text and images. So, if you run into a
situa</div> <!--end of part two-->

</body>
</html>

there are two parts:
part 1 is a <div>(1 will call it <div1>wink that contains some paragraphs. the <div> is surrounded by a border to make it clearer.

part 2 is also a <div>(i will call it <div2>wink

i styled <div1> with float:left.so i expected <div2> to be on the right side of <div1>, it did, just as expected,

problem(1)
but when i styled <div2> with width:50px, it left the right side of <div1> to stay under&left as if stacking. Adding the <div1>width(200px),margin-left(200px) and <div2>width(50px)=450px only. mind you, i didnt clear the float after <div1>, so why should <div2> leave the right side of <div1>.

problem(2)
the <div2> border starts from the top left corner of the browser, even to the content(text)
starts from the left or under <div1> in the two cases above.

thanks.
Re: Why Float Instead Of Using Coordinates (top And Left) by lanbaba: 11:12pm On Jan 06, 2010
think i understood what you said yawatide.i will try it. just the technicalities of iit is the lil prob.but with God andyou guys, its little
Re: Why Float Instead Of Using Coordinates (top And Left) by yawatide(f): 11:24pm On Jan 06, 2010
1) ALWAYS indent your code. It makes it easier to read
2) Your code was canned by the spam bot but I have sent an email to seun to unspam it
3) Your problem is that for 2, you didn't set a width and you didn't float left either. When you don't specify a width, the browser will default to a 100% width, which is why 2 is featuring below 1. You also needed a clear as well as a container around both DIVs.

Try this (edited):



<style>
body {margin:0px; padding:0px; }
.withborder {border: 3px solid grey; }
.clear { clear: both; }
</style>
<body>

<div id="container">
<!-part 1-->
<div class="withborder" style="border: 3px solid red;float:left; padding:3px; width:200px; height:auto;

margin-left:200px;">
<p class="withborder" style="">As is usual wi</p>
<p class="withborder">God is verposition:relative; position:relative; <p/>
<p class="withborder">lanre As is usual with positioned below a floating element, use clear.</p>
</div> <!--end of part1-->

<!--beginning of part 2-->
<div class="withborder" style="float:left; width: 300px;">
people text andth CSS (and impossible in traditional HTML), you can apply the
clear property to any element, not just text and images. So, if you run into a
situa
</div> <!--end of part two-->
<br class="clear" />
</div>
</body>
</html>

Note: my values are completely arbitrary for the widths. If you modify and would also like to set a width for the container, you need for account for that in your math.

good luck!
Re: Why Float Instead Of Using Coordinates (top And Left) by DualCore1: 5:03am On Jan 07, 2010
In addition, talking about the box model.

The entire width of your box (which in most cases is your DIV) = The width of the DIV +  Any left or right padding + Any left or right margin + any border-left-width or border-right-width.
The Entire height of your box  = The height of the DIV + Any top or bottom padding + Any top or bottom margin + any bother-top-width or bother-bottom-width.

Sometimes times after floating stuff you may then have to add a padding here or there, once you add a padding or margin you will have to compensate for it by subtracting the amount u added to the pad from the width or height of the DIV or any other element as the case may be.


All the best in your endeavors.
Once you're grounded with CSS you should consider taking Yawa for a drink. She doesnt drink beer, she drinks <div style="float:left"><strong>wine</strong></div>  wink
Re: Why Float Instead Of Using Coordinates (top And Left) by Nobody: 9:35am On Jan 07, 2010
Float is totally better and in good practical use for Column and Galleries and other sort.the issue with aboslute is that depend on the resolution or viewport of the browser if the element is absolutely postion on 20px left on your 1024px resolution on a 800px the element will be exactly paced on that position.so excep you create an element before it with relative and positon the ur element with absolute float to me is far easier to use and more flexible.absolute is rarely used except with some css smart tricks
Re: Why Float Instead Of Using Coordinates (top And Left) by yawatide(f): 10:51am On Jan 07, 2010
Dual, na wa for you o grin

Poster:
I saw your code and posted an answer based on that but your guess is as good as mine as to why it isn't showing up.

I have since sent a request to Seun to remove the "injunction" on our responses and hopefully, he will oblige soonest.

Thanks and sorry for any inconveniences.
Re: Why Float Instead Of Using Coordinates (top And Left) by Nobody: 10:56am On Jan 07, 2010
yeah same to me i posted a link to my gallery to show someone that i completed it.but it stripped the post out.suddenly nairaland is suddenly beginning to feel like china.
Re: Why Float Instead Of Using Coordinates (top And Left) by DualCore1: 1:15pm On Jan 07, 2010
pc guru:

suddenly nairaland is suddenly beginning to feel like china.

The chinese government has banned <a href=""></a> ?
Re: Why Float Instead Of Using Coordinates (top And Left) by lanbaba: 10:15pm On Jan 07, 2010
yawa-ti-de:



Imagine you have 1 carton open on either side. The carton is "container". Now imagine you have a pack of whot cards. You take one and place it at the bottom of the carton. That is "footer". You take another 2 and place them on either side, on top of the "footer". Those are your 2 floated DIVs. You then place a card on top of the 2. That is your navigation. You take yet another and place it on top of your "navigation". That is your "header".

Make sense?

does it mean that the header, navigation, footer in this example are flowing (default arrangement by browser if no form of positioning is specified). ie header is stacked on the navigation, navigation on the 2 floated dis, and the two floated divs are stacking on the footer.stacking here means default positioning by the browser,
Re: Why Float Instead Of Using Coordinates (top And Left) by yawatide(f): 3:31am On Jan 08, 2010
Yes, yes, yes and yes. Right on the money bro smiley

I am glad you are finally catching on.
Re: Why Float Instead Of Using Coordinates (top And Left) by lanbaba: 1:00pm On Jan 08, 2010
yawa-tide:
cant still see my code you edited and the reply you typed with it, what is seun doing about it
Re: Why Float Instead Of Using Coordinates (top And Left) by DualCore1: 1:45pm On Jan 08, 2010
lanbaba:

yawa-tide:
cant still see my code you edited and the reply you typed with it, what is seun doing about it

I have mailed you both your post and yawa's reply that were blocked by the antispam boy.
Re: Why Float Instead Of Using Coordinates (top And Left) by yawatide(f): 2:36pm On Jan 08, 2010
lanbaba:

Sorry, Seun has sole "ownership" over the spam bot and until he unspams it, there is nothing I can do.

For the record, I have told him a few times that though I don't know about sex and romance boards, when it comes to webmaster board for example, quality posts are being lost as a result and that contrary to popular belief, it is nairaland (and the people who learn from such posts) that will lose out in the end, not the poster.
Re: Why Float Instead Of Using Coordinates (top And Left) by Nobody: 6:17pm On Jan 08, 2010
Dual Core:

I have mailed you both your post and yawa's reply that were blocked by the antispam boy.

cheesy cheesy cheesy cheesy cheesy cheesy
Re: Why Float Instead Of Using Coordinates (top And Left) by DualCore1: 6:32pm On Jan 08, 2010
Brotha, calling what we have on nairaland a Bot is an insult to Artificial Intelligence. So na boy.
Re: Why Float Instead Of Using Coordinates (top And Left) by lanbaba: 8:57pm On Jan 08, 2010
pls take a look at this

withborder:adds border
clear:clears both

<div class="withborder" >
        <p style="float:left;">Our services are unbelievably affordable. just talk to us, no     matter how small you think your budjet is, we can make it happen for you</p>
        <p style="float:left;">Our services are unbelievably affordable. just talk to us, n        how small you think your budjet is, we can make it happen for you</p>
</div><br class="clear">

in the above code, the two paragraphs are suppose to appear side by side, then the border of the <div> should enclose the two together.

Question: why is it that the two paragraphs appear below the border(although side by side as expected). the div's border shows as if i set the value  of its height to '0'. this also happen if i set the value of the height to 'auto'. mind you i also set values for the respective widths, of course having in mind the box model and it also didnt work,
Re: Why Float Instead Of Using Coordinates (top And Left) by DualCore1: 9:20pm On Jan 08, 2010
CSS Jamb.   grin

I'm on the road. I dey fast and pray make person answer am before I get on PC so i wont have to answer.

P.S: Please provide the css part.
Re: Why Float Instead Of Using Coordinates (top And Left) by lanbaba: 9:34pm On Jan 08, 2010
Css part withborder {border-style:solid; border-width:2px; border-color:grey;} clear {clear:both; } ,
Re: Why Float Instead Of Using Coordinates (top And Left) by yawatide(f): 10:26pm On Jan 08, 2010
lanbaba, I could have sworn dual emailed you my (flagged) solution which answered this.

By default, the Ps and DIVs span the width of its container, 100%. In order to get the Ps side by side, you need to set the width of at least one.

Set the width of at least one P and see the wonders thou shalt perform wink
Re: Why Float Instead Of Using Coordinates (top And Left) by lanbaba: 11:09pm On Jan 08, 2010
Yes yawa. I set d width of both p and of course d containing div and got dem staying side by side.actually, dats not d prob. D prob is dat d paragraphs are nt inside d div's border. D paragraphs appear under d border as if i set d div's height to zero. Note: the paragraphs appear side by side jst as i want.
Re: Why Float Instead Of Using Coordinates (top And Left) by yawatide(f): 11:39pm On Jan 08, 2010
Look at where you are clearing the floats. Remember, you have to add the clear * right after * the floated items, not the container. so move the BR to right after the 2nd P tag (as in <div><p></p><p></p>
</div>)

By the way, probably done on purpose but just in case, I noticed that your CSS rules didn't have a "." preceding them as in ".clear".

Let me know if this explanation helps
Re: Why Float Instead Of Using Coordinates (top And Left) by DualCore1: 11:46pm On Jan 08, 2010
woohoo saved by the babe
Re: Why Float Instead Of Using Coordinates (top And Left) by OmniPotens(m): 1:23am On Jan 09, 2010
@Dual Core this is 2010 man, be more serious naa
Re: Why Float Instead Of Using Coordinates (top And Left) by DualCore1: 7:13am On Jan 09, 2010
Omni, check through all ma posts. This is as serious as I can get.  My sense of humour is Y2k10 compliant. I aint changing that bro. Ease up.\

I balance work and play very perfectly. I wont be playing on a thread if something needs a fix and i have a fix for it that i havnt posted.

What were you expecting?
I should float yawa to the left or right? lol
Chill bro. 2010 no change ma personality at all. Year dey go, year dey come,  we will remain highly carried.
May we walk and never stumble as we keep our gyration constant.  grin


Now I've gone sooo offtopic undecided

Well awaiting lanbaba's results and hoping everything has worked.
Re: Why Float Instead Of Using Coordinates (top And Left) by Gabry(f): 5:04pm On Jan 09, 2010
^^^ Yeah. Keep it real with your yeye attitude. I like it! tongue
Re: Why Float Instead Of Using Coordinates (top And Left) by lanbaba: 5:32pm On Jan 09, 2010
woo hoo, just like dual said, "saved by the babe" . i did all the stuff and it worked. actually , i was clearing outside the containing div, thanks guys

(1) (2) (Reply)

Earn Online Secrets Exposed: Case Study / Google Uk Adsense For Sale at cheap price - Hurry / Need An SEO Friendly & Well Customized Blog? Come In

(Go Up)

Sections: politics (1) business autos (1) jobs (1) career education (1) romance computers phones travel sports fashion health
religion celebs tv-movies music-radio literature webmasters programming techmarket

Links: (1) (2) (3) (4) (5) (6) (7) (8) (9) (10)

Nairaland - Copyright © 2005 - 2024 Oluwaseun Osewa. All rights reserved. See How To Advertise. 62
Disclaimer: Every Nairaland member is solely responsible for anything that he/she posts or uploads on Nairaland.