html - CSS Div Alignment and Positioning -


i'm trying create page similar this: http://bit.ly/1t8xgqp specifically, i'm talking row guy in kitchen.

as envisage it, row consists of text container , image container encapsulated within row container.

when window made smaller,the image appears move behind text column.

when window made larger, text column sticks side of image column. image column sticks right side of screen @ times.

i have been unable create this.

here code:

html

<div id="row_container">      <div id="image_container">     <img src="images/1297x756_image.jpg" width="1297px" height="756px" border="0" />     </div>      <div id="text_container">     text     </div>  </div>

css

#row_container {     width: 100% height: 756px; background-color:black; position:relative; }  #image_container{ width: 1297px; height: 756px; background-color:#03c; position:absolute; right: 0; }  #text_container { width:  383px; height: 756px; background-color:blue; position:absolute; left:0px; }

can please me fix this? thank you!!!

you should float image , text , avoid using position:absolute.

css

#row_container {   width: 100%;   height: 756px;   background-color:black;   float:right;   background-color:#03c;   position:relative; } #image_container{   width: 912px;   height: 756px;   background-color:#03c;   float:right;   right: 0; } #text_container {   width:   383px;   height: 756px;   background-color:blue;   float:left;   left:0px; }

html

<div id="row_container"> <div id="image_container"> <img src="http://www.planwallpaper.com/static/images/a601cb579cc9a289bc51cd41d8bcf478_large.jpg" width="100%" height="756px" border="0" /> </div> <div id="text_container">     <p>lorem ipsum dolor sit amet, consectetur adipiscing elit. proin sodales convallis bibendum. donec ac elit id diam egestas ultricies. curabitur porttitor nulla in odio porttitor congue. ut eu magna justo. etiam consectetur rutrum porttitor. nullam tempus sodales volutpat. sed interdum imperdiet tellus, id semper turpis facilisis vel. curabitur sed ipsum nec nisl hendrerit viverra in ut felis.</p> </div>

do come if still face issue.


-

Comments

Post a Comment

Popular posts from this blog

c# - Binding a comma separated list to a List<int> in asp.net web api -

the default binder in web api expecst http://url.com/webapi/report/?pageids=3243&pageids=2365 to bind public ihttpactionresult report(list<int> pageids){ // exciting webapi code} i wish bind http://url.com/webapi/report/?pageids=3243,2365 as running out of space in url get . i have created class public class commaseparatedmodelbinder : system.web.http.modelbinding.imodelbinder { public bool bindmodel(httpactioncontext actioncontext, modelbindingcontext bindingcontext) { //binding in here } } and registered in webapiconfig.cs var provider = new simplemodelbinderprovider( typeof(list<int>), new commaseparatedmodelbinder()); config.services.insert(typeof(modelbinderprovider), 0, provider); i have altered method signature use model binder so public ihttpactionresult report( [modelbinder] list<int> pageids){ // exciting webapi code} however break point in binder not being
Read more

Delphi 7 and decode UTF-8 base64 -

in delphi 7, have widestring encoded base64(that received web service widestring result) : pd94bwwgdmvyc2lvbj0ims4wij8+dqo8c3ryaw5nptiq2lpyqjwvc3ryaw5npg== when decoded it, result not utf-8: <?xml version="1.0"?> <string>طھط³طھ</string> but when decoded base64decode.org, result true : <?xml version="1.0"?> <string>تست</string> i have use encddecd unit decodestring function. the problem have using decodestring . function, in delphi 7, treats decoded binary data being ansi encoded. , problem text utf-8 encoded. to continue encddecd unit have couple of options. can switch decodestream . instance, code produce utf-8 encoded text file data: {$apptype console} uses classes, encddecd; const data = 'pd94bwwgdmvyc2lvbj0ims4wij8+dqo8c3ryaw5nptiq2lpyqjwvc3ryaw5npg=='; var input: tstringstream; output: tfilestream; begin input := tstringstream.create(data); try output := tfilestream.
Read more

html - Is there any way to exclude a single element from the style? (Bootstrap) -

so, have img logo, overlaid on div styled background-image: url("...") , , both elements inside 2 div classes .to-color , .to-overlay respectively, black transparent overlay. is there way exclude logo style given these 2 classes? here's jsfiddle example: link html , css example: - html - <div class="to-color"> <div class="to-overlay"> <div class="respo"> <div class="row"> <div class="col-xs-4 col-xs-offset-4 text-center"> <img src="http://ansonalex.com/wp-content/uploads/2011/06/google-logo-768x260.png" alt="..." class="img-responsive"> </div> </div> </div> </div> </div> - css - .to-color { background-color: #000; } .to-overlay { opacity : 0.5; } .respo { background-image: url("https://source.unsplash.com/category/objects/1600x900"); background-position: center center;
Read more