Aligning specific elements vertically through css and not messing with responsive view

HTML & CSS
1

this is the code for .ppleft

    /************** Sets the styles for the left side of the page, where the main product image 
    and view selectors are **************/
    .ppLeft {
    float:left;
    width:400px;
    margin:0 18px;
    }

I want all the following elements of .ppright under the .ppleft currently they are on the right of .ppleft

/************** The right side of the product page (the       styles/colors/buy button area) **************/
.ppRight {

float:left;
width:446px;
position:relative;
}
.productInfoShell {
border:1px solid #ddd;
padding:18px;
background:#f5f5f5;
font-size:14px;
}

/************** The price box **************/
.priceShell {
float:right;
margin-left:9px;
}

somehow when i try to do it messes up with responsive view
i tried adding
position: relative
right: 25 px;
but i am an absolute noob when it comes to aligning elements…please help!
thanks in advance :smile:

2

Can you explain more clearly what you are trying to do, maybe a sketch.
I’m guessing you want the two elements side by side, but then stack vertically on small screens. Is that it?

3

Can you post the HTML that the CSS styles? That would help as much as anything since CSS and HTML work together.

2 Likes
4

samA74 I want two elements stacked upon each other in web view as well as responsive view
ronpat it is basically a dynamic page which pulls results please see

http://www.mgdezigns.com/old_burnt_papyrus_business_cards_zazzle_profilecard-240713286902721682.html

posted the link because I was not sure what html to post as the .ppright and .pp left pulls dynamic results from a feed :smile:
Thank You

5

Simply removing the floats from the two divs will cause them to stack one above the other.

You also need to remove

position: relative;    
right: 99px;

from .ppRight

3 Likes
6

yay!!! working now!!! THANK YOU!!!

7

so is it possible to make the width of this page fluid I mean resize according to responsive view
…right now the width of the page is way too much… like it wraps within the device frame just like my other pages? am I making any sense?

8

Are you sure your other pages are responsive? I couldn’t find one. For one thing, the menu/navbar doesn’t resize. It gets to a certain size and then disappears altogether.

9

eeek! it is a mess I know :frowning: I just don’t know how to fix it up!

10

i just thought it was really important to fix just this page…others can do for now until I figure out to fix em

11

One step at a time is a good move. However, in order to fix that page you will need to fix the menu. That is quite a hefty menu and yo need to consider how you want it to look on a mobile then work out the media queries to get there. You have quite a few style sheets so I’m not sure which you will need to modify.

13

main.css the header bottom part

14

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.