Jump to content
Nati323

some problems with divs

Recommended Posts

hello, i have some problems with divs in my web site,

 

the first one is that i have navigation bar, and i want that he will strech for all over the page, picture:

550c213415ad3.png

 

you can see were wrote 1, the div ends there, and the text from the left div continue below, i dont want this, i want that the blue div will strech until the end of the page and the text will be at the left of him.

so i google it , and i found some websites that says that i need to do 100% height to html , body and div tags, so i did it but its dosent work.

the div is floated to the right if its metter

 

second problem:

if you look at the middle of the image where the number two show you will see div with border marked in blue (i marked it with the debbuger of chrome), as you can see the div ends in the right navigation bar, inside him, i dont want this i want that he will end before the navigation bar.

 

 

 

 

Share this post


Link to post
Share on other sites

I have the same problem, my black rectangle, which i want to occupy the top of my page, allow unwanted white borders around my rectangle, even if i input margin-left etc to -2em. I want not white space between my rectangle and the "real" border of the page. Here is my html code:

<header id="head" style:{background-color:black}><div class="container" style="text-align: center;background-color:black;"><a href="http://3.bp.blogspot.com/-doPbtdUaEl0/VQWQejg7isI/AAAAAAAAA0E/v-wLWVXV100/s1600/logotipo.png" imageanchor="1" style="; margin-right: -2em; margin-top: -2em"><img border="0" src="http://3.bp.blogspot.com/-doPbtdUaEl0/VQWQejg7isI/AAAAAAAAA0E/v-wLWVXV100/s320/logotipo.png" /></a></div></header>

Please help us both! thanks in advance...

Share this post


Link to post
Share on other sites

The 100% is applied to html, and body tag, note ONLY the outermost containers within body will stretch to full height using min-height: 100%.You could try giving the illusion the right column is hundred percent height, by using background element behind it, using position absolute.Element cutting into right column is cause by the floating of this right column, apply right margin to this element the same width as right column, OR try overflow: auto.

I have the same problem, my black rectangle, which i want to occupy the top of my page, allow unwanted white borders around my rectangle, even if i input margin-left etc to -2em. I want not white space

Maybe due to the fact that the body has default margins and padding, try zeroing these. Edited by dsonesuk

Share this post


Link to post
Share on other sites

Sorry, but zero-ing padding and/or margins result in disappearing the black rectangle. Thanks anyway. See what i am trying:

<!DOCTYPE html><html><head><style>#header {	font-fmily:"IM Fell English";    background-color:black;    color:white;    text-align:center;    padding:0px;}</style></head><div id="header"><h1>ATHENIAN CORNER</h1></div>
Edited by Michael34

Share this post


Link to post
Share on other sites

Learn how to correctly create an html page, you should zero at most the margin of body tag, but you don't even have a body tag, also you don't have closing html tag. You should validate your code before posting.

Share this post


Link to post
Share on other sites
<!DOCTYPE html><html><style>#header{	background-color:black;    color:white;	text-align:center;    padding:5px;#section{	@font-face {		font-family: Cyprus;		src: url('http://atheniancorner.comlu.com/Cyprus_21-webfont.woff');	body{"font-family:Cyprus, serif""color:black""background-color:white"}	h22{Font-family:Cyprus; color:black;background-color:white;text-align:left;}	width:1440px;    float:left;    padding:0px; }<head><div id="header"><h2>ATHENIAN CORNER</h2></div>                  </head> <br /></div><br /><br /><br /><meta charset="UTF-8"><div id="section"><td style="text-align: center;"><a href="http://3.bp.blogspot.com/-bJJtddlw9U8/VN9ft-4YweI/AAAAAAAAAtc/sY7wGDX0BQA/s1600/Thucydides_pushkin01.jpg" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" src="http://3.bp.blogspot.com/-bJJtddlw9U8/VN9ft-4YweI/AAAAAAAAAtc/sY7wGDX0BQA/s1600/Thucydides_pushkin01.jpg" height="400" width="287" /></a></td></tr><h22>suggra/yw to*n po/lemon tw8n )Ibh/rwn kai* (Romai/wn, eu)qe/wv a)rxo/menov e(stame/non, a)f ) ou[ summaxh/santev toi=v Karxhdoni/oiv me/xri pa/shv th=v )Ibhri/av u(feime/nhv ta* o3pla kate/qento.<br />akma/zontov tou= si/tou e)n toi=v a)groi=v mesoume/nou qe/rouv bia/zontai oi( Peloponnh/sioi a3ma toi=v summa/xoiv th*n di/odon dia* tou= (Elikw=nov o1rouv kai* parabohqou=si me/xri )Axarnw8n.<br />periousi/an si/tou e1xontev kai* th=v no/sou pepaume/nhv oi( )Aqhnai=oi ou)k e)pau/santo polemou=ntev, kai* e1ti paraskeuh*n pe/mpousin ei)v Sikeli/an.<br />(H nu=n )Ibhri/a kaloume/nh fai/netai pa/lai oi)koume/nh, e1ti pro* tw8n Keltw8n kai* tw*n )Ibh/rwn kaloume/nwn, kai* tw8n ta* no/mima kai* th*n glw=ttan tou/twn e)xo/ntwn, to* de e1qnov e)kei/nwn tw_n proshgoreume/nwn Keltibe/rwn.<br />Foi/nikev ga*r kai* meta* tou/touv oi( 3Ellhnev e)xrhmati/zonto dedhmiourghme/na e1rga a)nti* xrhma/twn e)k palaiou=, a)lla* palaite/rw tau/thn xw/ran a1lloi kai* w|1khsan.<br />ou)k e1xomen ei)pei=n apo* ti/nov xro/nou th*v futei*av kai* th=v kthnotrofi/av a)rca/menoi e9pau/santo biou=ntev a)po* th*v qhrei/av kai* th*n sullogh*n karpw8n w{n h( gh= au)th* e1fere.<br />thkmairo/menov tolmw8 ei)pei=n o3ti th*n a)rxh*n a)tei/xistoi kai* spora/dev w|!koun ta* a1ntra, e1peita puqo/menoi th*n a)ci/an tw8n meta/llwn w{n h( gh= a)nedi/dou kai* a(millw/menoi th=v e)mpori/av e3neka pro*v e)kei/nouv h1rcanto teixi/zein ta*v po/leiv kai* polemei=n a)llh/loiv, a3ma te kai* qhsauri/zontev xrh/mata, e)n o)xuroi=v xwri/oiv fulatto/menoi tou*v a)ei* polemi/ouv, e)pibouleu/ontav kai* toi=v o(mofu/loiv.<br />w9/ste a)ei* e)pibouleu/ontev a)llh/loiv ou)de*n koino*n e1rgon fai/nontai su/mpantev a3ma e)rga/sasqai me/xri ou[ oi( Karxhdo/nioi kai* (Romai=oi e)pefa/nhsan.<br />o( mu=qov shmai/nei o3ti )Eli/sa, biasqei=sa e)pi* xrh/masi gamhqh=nai Sixe/w| w|{ mh* h)ra=to u(po* Pugmali/wnov tou= a)delfou=, kai* a)polome/nou tou* numfi/ou u(po* tw8n e(tai/rwn Pugmali/wnov, e1fuge a)po* Tu/rou fe/rousa to*n qhsauro*n tou* a)ndro*v kai* die/pleuse ei)v th*n )Afrikh*n o3pou e1ktise th*n nu=n Karxhdo/na kaloume/nhn po/lin.meta* tou=to oi( Karxhdo/nioi h(millw8nto pe/mpontev a)poiki/av ei)v th*n )Ibhri/an toi=v Turi/oiv, kai* xruso/n te kai* a1rguron kai* xalko*n diapratto/menoi a)po* th=v xw/rav a)nti* mh* a)cioxrewte/rwn e)rgasiw8n.<br />ou)x o3ti lepto/gewv, a)lla* baqei=a h]n h( gh= kai* eu1forov, h3n oi( 1Arabev polloi=v u3steron e1tesi e)karpw/santo, th*n baqi/sthn, th*n peri* th*n Baitikh/n legome/nhn.<br />a)lla* peri* tw8n ei)v )Ibhri/an e)kpleusa/ntwn oi( Fwkei=v e)k Massali/av th=v Keltikh=v a)pw|&kisan to* )Empo/rion korufai=on kai* o)li/gav e(te/rav po/leiv.<br />oi( Keltoi* oi( e)n th|0 )Ibhri/a| ma/lista h3ptonto th=v kthnotrofi/av, oi( d ) 1Ibhrev a)ntepoiou=nto th=v e)rgasi/av.<br />suggnw/mhv teu/cesqai para* tw8n a)nagnwsome/nwn th*n e)mh*n su/ntacin e)lpi/zw e)pi* tai=v e)ni/ote pare/rgoiv kai* a)niarai=v paraba/sesi a)po* tou= kefalai/ou th=v parou/shv pro* ofqalmw8n susta/sewv.<br />)Anni/bav o( e1ndocov strathgo*v e)pi* au)toi=v toi=v i(eroi=v w1mose tw|8 patri* dw/deka mo/noiv e1tesi gegonw*v timwrei=n tou*v (Rwmai/ouv e)pi* th|= a)nhke/stw| o)rgh|= tou= patro*v pro*v e)kei/nouv.<br />Kai* perilabw*n au)toi=v e)le/fasi Keltou*v, Libu/av, Baliarei=v, 1Ibhrav kai* au)tou*v tou*v Karxhdoni/ouv stratiw&tav e(ni* sto/lw| e)ph/negke po/lemon ei)v au)th*n th*n )Itali/an.<br />nikh=sav e)n Ka/nna| tou*v (Rwmai/ouv kai* poliorkh*sav (Rw/mhn kai* de/ka e1th strateusa/menov e)n )Itali/a| te/lov stratia=v (Rwmai/wn ei)v au)th*n th*n Karxhdo/na pemfqei/shv kai* th=v gerousi/av bohqei=n keleusa/shv kai* a)nakalou/shv u(po* Skhpi/wnov e)nikh/qh e)n )Afrikh|= kai* e1fuge e1ti zw8n. Karxhdw_n me/xri e)da/fouv ska/ptetai u(po* (Rwmai/wn. te/lov )Anni/bav teleuta=|, le/getai u(po* farma/kou.<br />a)po* th=v kaloume/nhv Ne/av po/lewv e)n )Ibhri/a|, kai* Karxhdo/nov prosagoreuqei/shv, a)rca/menoi oi( Karxhdo/nioi th*n )Ibhri/an skedo*n a3pasan e)da/masan, me/llontev xrh/sesqai toi=v e)pixwri/oiv w9v biasqei=sin e)pikouri/oiv e)pi* (Rwmai/ouv, e1rgw| dou/loiv. te/lov poliorkou=si Zaka/nqhn summaxi/da ou]san (Rwmai/oiv, o3per a)rxh* e)ge/neto tou= pole/mou, tri/tou kai* e)sxa/tou Karxhdoni/wn kai* (Rwmai/wn.<br />au)ti/ka oi( (Rwmai=oi e)kba/ntev e)k tw8n new8n ei)v )Empo/rion a)rca/menoi summaxi/an sunti/qentai toi=v e)pixwri/oiv, w9/ste pau/ein tou*v Karxhdoni/ouv th=v e)piboulh=v.<br />diw&rize o( 1Ibhr potamo*v ta* (Rwmai/wn kai* Karxhdoni/wn kata* ta*v sponda*v, me/xri oi( Karxhdo/nioi prose/ballon Zaka/nqhn, a)poiki/an ou]san tw8n Zakunqi/wn.<br />oi( (Rwmai=oi a)nqu/patoi oi( e)n )Ibhri/a| pleone/ktai o1ntev deka/thn a)ph|/toun tou= qerismou= kai* dw8ra pare/labon para* tw8n e)pixwri/wn a)di/kwv. h( su/gklhtov tw8n (Rwmai/wn tau=ta ei)dui=a e1qeto no/mouv i3na pau/seian tau=ta ta* e1qh.<br />Lousitanoi* de* kai* pra/gmata pare/sxon toi=v (Rwmai/oiv. a1rxontev tine*v e)pole/moun e)kei/noiv a)a/ptw| qumw|8, me/xri Ou)iria/tov polhmh/sav a)parata/ktwv kai* nikh/sav au)tou*v polla*v mikra*v kai* a)e/lptouv ni/kav u(po* tw8n e(autou= e(tai/rwn a)pw&leto.<br />e1peita Kelti/bhroi kai* h( kuri/a po/liv au)tw8n, Nomanti/a, a)nqe/stasan polu/ponon po/lemon (Rwmai/oiv, kai* h( Nomanti/a a)nte/sxe a)ndreiw/tata e3wv, a)peirhko/tev th=v swteri/av a)pe/kteinan pa/ntev sfa=v au)tou*v kai* ta* te/kna. teleuthko/tov ou]n tou= pole/mou, h( po/liv kateska/fqh ei)v e1dafov.<br />Kai* e)n tw|8 e)ndh/mw| pole/mw| Kai=sar e)pole/mhse toi=v stasiazome/noiv pro* Pomphi+/ou kai* e)ni/khse au))tou*v peri* Mou/nda|.<br />te/lov Au)/goustov ufh=ke )Astou/rav kai* Kanta/brouv, meta* diako/sia e1th sunexou=v pole/mou e)n )Ibhri/a|.<br /></h22></div></html><br /><br /><div class="separator" style="clear: both; text-align: center;"><a href="http://atheniancorner.comlu.com/Atheniancorner/Intermediate%20II%20Greek.html" target="_blank"><img alt="http://atheniancorner.comlu.com/Atheniancorner/Intermediate%20II%20Greek.html" border="0" src="http://2.bp.blogspot.com/-IHP8zvER6QY/VOTwBqdrQFI/AAAAAAAAAts/zSuWhTrLE5o/s1600/Back.png" /></a></div><br /><div class="separator" style="clear: both; text-align: center;"><a href="http://atheniancorner.comlu.com/Atheniancorner/Advanced%20%28Xenophon%29.html" target="_blank"><img alt="http://atheniancorner.comlu.com/Atheniancorner/Advanced%20%28Xenophon%29.html" border="0" src="http://3.bp.blogspot.com/-nrAo8DML1R8/VOheiQ8egsI/AAAAAAAAAuw/0kMCsbuLMfs/s1600/Forward.png" /></a></div><br /><h2><a href="http://www.divshare.com/download/26803209-585">Download font </a></h2><br /><a href="http://atheniancorner.comlu.com/Atheniancorner/Lexicon.html" target="_blank"><span style="font-family: inherit;">Lexicon</span></a><br /></body></html><br /><div style="text-align:center; margin:0px; padding:0px; width:220px;"><embed src="http://rd.revolvermaps.com/f/g.swf" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" quality="high" wmode="window" allowscriptaccess="always" allownetworking="all" width="220" height="220" flashvars="m=0&i=3gj6ivse4v3&r=false&v=true&b=000000&n=false&s=220&c=ff0000"></embed><br /><img src="http://jd.revolvermaps.com/c/3gj6ivse4v3.gif" width="1" height="1" alt=""/><span style="font-size: 60%;"><a href="http://livetechnologybd.blogspot.com/2014/02/add-3d-visitor-counter-on-blog.html" target="_blank">Get this Widget</a></span></div><br /><br /><a href="http://www.000webhost.com/" onClick="this.href='http://www.000webhost.com/849162.html'" target="_blank"><img src="http://www.000webhost.com/images/banners/120x60/banner1.gif" alt="Web Hosting" width="120" height="60" border="0" /></a>

Here is my complete code, mistakes can be image embedded, font-style with my greek font or perhaps the final links which are outside the html tag...I have made up all the rest just as it reads in the html tutorial....P.S. I don't know how to validate my code in notepad sorry for that :(

Edited by Michael34

Share this post


Link to post
Share on other sites

The 100% is applied to html, and body tag, note ONLY the outermost containers within body will stretch to full height using min-height: 100%.You could try giving the illusion the right column is hundred percent height, by using background element behind it, using position absolute.Element cutting into right column is cause by the floating of this right column, apply right margin to this element the same width as right column, OR try overflow: auto.Maybe due to the fact that the body has default margins and padding, try zeroing these.

hey, the second advice works, i did margin right to the divs and all good.

 

but about the first problem, i dont realy understand you, what do you mean that only the outsiders containers will strech?

the right column is the second div in my page, and is parent is body,

 

can you give me an example about what you say? background element? what to do exacli?

Share this post


Link to post
Share on other sites

I got it! Here is my code:

<style>#header{	position: absolute;	width: 1430px	height: 50px;	background-color:black;    color:white;	top: 0px;	right:0px;	left:0px;	align: fixed;	text-align:center;    padding:5px;}

http://atheniancorner.comlu.com/Atheniancorner/Advanced%20%28Thucydides%29.html

Thank you for support and i hope this works also for Nati323!! =)

Edited by Michael34

Share this post


Link to post
Share on other sites
<div id="wrapper"><div id="right">nav content </div><div id="main_content"> remaining divs will be placed here</div></div>
body, html { margin: 0; padding: 0; height: 100%; }#wrapper {min-height: 100%; position: relative; }#right {width: 20%; float: right; }#main_content { margin-right: 20%; }#wrapper:after { position: absolute; width: 20%; content: ""; top: 0; right: 0; bottom: 0; background-color: blue;}
Edited by dsonesuk

Share this post


Link to post
Share on other sites

You should only use position: absolute; for overlapping purposes, for layout it is unpractical and only used if the same result cannot be achieved using margin, padding or float.

Share this post


Link to post
Share on other sites

update: wird problem, i ask from someone else to try my code with html,body,div 100% height, and its work for him, he show me a picture, but on my computer its not work, i try in chrome and IE , i dont know whay its not work, maybe you know...?

Share this post


Link to post
Share on other sites

Just to point out if you use height: 100%; on the div it will remain the same height as your browser window, even if the content extends beyond the browser window height, that is why you should use min-height: 100%; it allows it to grow beyond browser window height, but no lower.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...