html - how align div one beside other, and on other div -
html - how align div one beside other, and on other div -
i tried codes but, no works anything. create css, =)
this code tried, doesn't work.
#left{ float:left; width:65%; overflow:hidden; } #right{ overflow:hidden; } <div id="wrapper"> <div id="left">left side div</div> <div id="right">right side div</div> </div> i don{t know why doesnt work.
html css share|improve question asked oct 14 '14 @ 21:47 mike brian olivera 87129 add comment | 4 answers 4 active oldest votes up vote 1 down voteadd float:left; #right, should work. note utilize float:right; #right, #right on right side. using float: left; both displays both divs next each other without gap.
for reference: https://developer.mozilla.org/en-us/docs/web/css/float
share|improve answer edited oct 14 '14 @ 21:55 answered oct 14 '14 @ 21:49 matthias_h 6,79041029 add comment | var ados = ados || {}; ados.run = ados.run || []; ados.run.push(function () { ados_add_placement(22,8277,"adzerk1336689438",4).setzone(44); }); up vote 1 down votetry script, wrote on jsfiddle:
http://jsfiddle.net/xb5vvpzn/1/
html
<div class="main"> <div class="top"> </div> <div class="bottom1"> </div> <div class="bottom2"> </div> </div> css
html, body { padding:0; margin:0; } .main { width:400px; border:1px solid #000; height:400px; padding:10px; } .main div { display:inline-block; } .top { width:396px; border: 1px solid #cc0000; height:100px; } .bottom1, .bottom2 { margin-top:10px; border: 1px solid #cc0000; width:195px; height:100px; } share|improve answer answered oct 14 '14 @ 21:59 giorgi nadiradze 1157 add comment | up vote 1 down vote here's jsfiddle i've created you. layout same had requested , it's responsive well.
html:
<div id="container"> <div id="onetwo"> <div id="one"></div> <div id="two"></div> </div> <div id="three"></div> </div> css:
#container { width: 100%; border: 3px solid blue; padding: 1% 1%; text-align: center; } #onetwo { display: block; width: 100%; } #one, #two { width: 49%; border: 3px solid red; height: 50px; display: inline-block; } #three { width: 100%; border: 3px solid red; height: 50px; } @media (max-width: 820px) { #one, #two { width: 46%; } } @media (max-width: 240px) { #one, #two { width: 40%; } } share|improve answer edited oct 14 '14 @ 22:09 answered oct 14 '14 @ 21:52 fahad hasan 5,47121428 just note because of thick border size, @ width, blocks collapse on top of each other. not sure if op wants prevent either way minor thing. answer. – aug oct 14 '14 @ 21:58 1 @aug: give thanks , noticed well. believe op utilize @media-queries in order prevent that, please take @ this: jsfiddle.net/tbnnm812/12 – fahad hasan oct 14 '14 @ 22:05 add comment | up vote 1 down vote a simple solution no floats:
class="snippet-code-css lang-css prettyprint-override">#main { width: 200px; /* adjust needed */ font-size: 0; } div div { display: inline-block; height: 60px; /* adjust needed */ width: 100%; box-shadow: inset 0 0 4px #000; /* cosmetics */ background: #eee; /* cosmetics */ } div.h { width: 50%; } class="snippet-code-html lang-html prettyprint-override"><div id="main"> <div class="h"></div> <div class="h"></div> <div></div> </div>
note: using font-size: 0 container div avoid actual whitespace in markup - can avoided removing spaces between elements, of course: <div>content here...</div><div>other one...</div>
sign using google
sign using facebook
sign using email , password
post guest name email stackexchange.ready( function () { stackexchange.openid.initpostlogin('.new-post-login', 'http%3a%2f%2fstackoverflow.com%2fquestions%2f26370939%2fhow-align-div-one-beside-other-and-on-other-div%23new-answer', 'question_page'); } ); post guest name email discardposting answer, agree privacy policy , terms of service.
not reply you're looking for? browse other questions tagged html css or ask own question.asked
1 year ago
viewed
86 times
active
1 year ago
var ados = ados || {}; ados.run = ados.run || []; ados.run.push(function () { ados_add_placement(22,8277,"adzerk1421778244",[5,17,2221]).setzone(45); }); ;"use strict";var _extends=object.assign||function(n){for(var i,r,t=1;t0&&(n.tags=i.join(";"))),n}function k(n){return n.innerhtml.replace(/\s+$/g,"")}function st(n,t,i,u){var c=r(n);if(c===null)return function(){};var h=null,e=null,l=f(),a=function a(){k(c)?(s(h),u(!1,f()-l)):e=o(a,t)};return e=o(a,t),i&&(h=o(function(){s(e);u(!0,f()-l)},i)),function(){s(e);s(h)}}function ht(){var t="careers1",i="careers3",u=e.hash.indexof("large=1")!==-1||!g()||r("#careersadsdoublehigh"),f=u?1:2,n=[f+"=hireme"];return r("#"+t)&&n.push("5="+t),r("#"+i)&&n.push("6="+i),n.join("&")}function d(n,i){var r=ot(_extends({},nt,{zones:ht()})),u,e;n&&(r.azt=1);i&&(r.lw=i);typeof t.innerwidth=="number"&&(r.bw=t.innerwidth);u=["zones","ip","ac","eng","prov","tags","theme","at","remote","seed","lw","azt","sysadmin","bw","nocpm","jobview","cpview"];e=l+"?"+ft(r,u);c=f();p(e)}function ct(n){function h(){u.foreach(w);e.foreach(function(n){lt(n,i[n],s,o)});typeof t.clc_after_load=="function"&&t.clc_after_load()}var i=n.cr,r=n.h,u=n.st,e=object.keys(i),o=c?f()-c:0,s="//"+r+"/ct";h()}function lt(n,t,i,f){var h=t.cl,c=t.cn,o=t.an,l=t.utm,s=(h||[]).join(" "),e=r("#"+n);e&&(s&&(e.classname+=" "+s),e.innerhtml=c.replace("&pt=0","&pt="+(f||0)),e.onmousedown=function(n){for(var t=n.target,r,f,s;t.tagname!=="a"&&t!==e;)t=t.parentnode;t!==e&&(r=[],o&&r.push("an="+o),f=[].filter.call(t.attributes,function(n){return/^data-/.test(n.name)}),f.length>0&&f.foreach(function(n){var t=n.name.replace(/^data-/,"");r.push(u(t)+"="+u(n.value))}),r.push("utm="+u(rt+l)),s="",r.length>0&&(s="?"+r.join("&")),t.href=i+s)})}function g(){return y(h).length>0}function at(n){var t=i.createelement("a");return t.href=n,t.host}function vt(){var t,n;g()?(n=st(h,20,t,d),o(function(){var u=r(h),t;k(u)||(u.parentnode.removechild(u),typeof n=="function"&&n(),t=i.createelement("img"),t.src="//"+at(l)+"/to.gif",t.style.display="none",i.body.appendchild(t))},2e3)):d()}var l=n.u,a=n.o,nt=a===undefined?{}:a,t=window,e=t.location,u=t.encodeuricomponent,v=t.decodeuricomponent,i=t.document,tt=i.body,it=i.getelementsbytagname("head")[0],o=t.settimeout,s=t.cleartimeout,rt="&utm_source="+e.hostname+"&utm_medium=ad&utm_campaign=",h="#sidebar [id^=adzerk].everyonelovesstackoverflow",c=0;t.clc={init:ct,load:vt,ls:p,as:w,tags:b}}).call(null, {"u":"//clc.stackoverflow.com/p.js"});"use strict";var allowedhosts=["stackoverflow.com","serverfault.com"];(allowedhosts[0]==="*"||allowedhosts.indexof(location.hostname)!==-1)&&window.clc.load(); related 2219 horizontally center div in div 1089 how align checkboxes , labels consistently cross-browsers 977 how create div not larger contents? 1445 how give text or image transparent background using css? 410 how align <div> middle (horizontally/width) of page 844 make div 100% height of browser window 452 vertically align text in div 1118 how disable resizable property of textarea? 707 how align text vertically center in div css? 1 how vertically align div opposite each other hot network questions there rules type conversion between c# generics? there phrasal verbs in portuguese? can square roots come when not distances? effect of rounding counts of artefacts, books or courses available? projects ever end early? zigzagify matrix how create digits of π go around in spiral this? demand simple games reconfirm airline ticket? why paper not available anymore? monkey , coconut array.map want map value nil image pilots touch in bsg? using fiance's money pay off pupil debt why aluminium soda cans typically round instead of square? curious know after email hr rpg currency scheme unfair coins @ south park simple v2 sec frog concerto potential employer not disclosing info without references came "death trap" concept? why cars still have mirrors rear view? how can developers assured software fault free? why "double encrypt"? more hot questions
Comments
Post a Comment