6 {{ upvoteCount | shortNum }}
6 {{ upvoteCount | shortNum }}

responsive? div css only...

by Arcsn
5 replies
Hi Guys,

I need an advice on a responsive <div>.
I am building a mobile friendly website and I need help.
I have two <div> (left and right) to position next to each other in desktop version, but one under another in mobile version (left above and right under).

now here is my html:

HTML Code:
 <div id="container">
      <h2>title goes here</h2>
	  <div id="left"> </div>
      <div id="right"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut accumsan erat sed justo porta convallis. Aliquam diam odio, volutpat a porta eu, tristique at lectus. Integer faucibus, quam vel vehicula rhoncus, ipsum quam fringilla elit, ac pharetra dolor est non turpis. Maecenas iaculis viverra dui, tempor mattis ligula cursus nec. Donec volutpat orci vel ornare molestie. Vivamus ac metus at nibh efficitur sodales sit amet ac risus. Aenean quis neque lacus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean nulla risus, sagittis posuere euismod non, congue non velit. Morbi at ipsum lacus. Phasellus et molestie felis, nec sodales erat. Etiam placerat eleifend sagittis. Maecenas id maximus urna.</p>
  </div>
  </div>
here is my css:

Code:
#container { /* i need to keep it as it refers to my menu*/
width:100%;
display: inline-block;
border-bottom: 3px solid #000000;
background-color: #FFFF00; 
}
#left {
  background-image: url(../img/myimage.jpg);
  background-position: center center;
  background-repeat: no-repeat;
  -webkit-background-size: contain;
  -moz-background-size: contain;
  -o-background-size: contain;
  background-size: contain;
  width:212px;
  height: 212px;
  float: left;
}
#right {
float: right;

}

now: I need the left div to be fixed width and load a background image (for mobile version i will load a smaller image).
the right div must be responsive and at certain point (with media query?) should go under the left div.

any tips?
#css #div #responsive
  • Profile picture of the author totalprocessing.net
    Determine at what pixel width you want the right div to drop and set the media query for both divs to float:none at that pixel width. At that point they should stack. You may want to set a width percentage or fixed width for it as well in the query.
    Signature
    Premium WooCommerce & WordPress Plugins $10/ea. or FREE With Membership. PluginForage.com
    {{ DiscussionBoard.errors[10281286].message }}
  • Profile picture of the author Arcsn
    actually I already solved this one. now I have the opposite "problem"... I need the variable width <div> to go left and the fixed width (with a background image) to go right...

    I am stuck on: (css)
    Code:
    .left {
margin-right: 371px;
}
.right {
  background-image: url(../img/myimage.jpg);
  background-position: center center;
  background-repeat: no-repeat;
  height: 290px;
  width: 371px;
  margin-top: 30px;
  float: right;
}
    my left <div> is not aligned... always goes under the image...

    my html:
    HTML Code:
    <div id="container">
      <h2>title goes here</h2>
	  <div class="right"> </div>
      <div class="left"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut accumsan erat sed justo porta convallis. Aliquam diam odio, volutpat a porta eu, tristique at lectus. Integer faucibus, quam vel vehicula rhoncus, ipsum quam fringilla elit, ac pharetra dolor est non turpis. Maecenas iaculis viverra dui, tempor mattis ligula cursus nec. Donec volutpat orci vel ornare molestie. Vivamus ac metus at nibh efficitur sodales sit amet ac risus. Aenean quis neque lacus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean nulla risus, sagittis posuere euismod non, congue non velit. Morbi at ipsum lacus. Phasellus et molestie felis, nec sodales erat. Etiam placerat eleifend sagittis. Maecenas id maximus urna.</p>
  </div>
  </div>
    it is working on mobile... but not on desktop version....


    any tips?
    {{ DiscussionBoard.errors[10282225].message }}
  • Profile picture of the author Arcsn
    solved using vertical align:top;
    {{ DiscussionBoard.errors[10284088].message }}
  • Profile picture of the author Nimmy Wilson
    [DELETED]
    {{ DiscussionBoard.errors[10284107].message }}
    • Profile picture of the author David Beroff
      Originally Posted by Nimmy Wilson View Post

      If you want any advice and suggestion related website development please contact {link removed}
      That's exactly what this forum is for in the first place.
      Signature
      Put MY voice on YOUR video: AwesomeAmericanAudio.com
      {{ DiscussionBoard.errors[10284507].message }}
  • Profile picture of the author Arcsn
    exactly David.

    I solved my problem anyway...
    {{ DiscussionBoard.errors[10290400].message }}

Trending Topics