Question about stacking

5 replies
  • WEB DESIGN
  • |
Ok, so I have a video embedded into my page. I have it set inside a container div that has two other divs inside (a left and right column). The video is in the right column. How do I use css to stack the video on the top of the page (in front of the left column) instead of where it currently is?
#question #stacking
  • Profile picture of the author SJL
    Frames don't wok like that. You will need to find another solution.

    Let's start on why do you need the left part, if you are going to cover it?
    {{ DiscussionBoard.errors[9423289].message }}
    • Profile picture of the author jbearnolimits
      Originally Posted by SJL View Post

      Frames don't wok like that. You will need to find another solution.

      Let's start on why do you need the left part, if you are going to cover it?
      I was planning on having it all where it is until the screen size gets smaller. At which point I need to change the layout to have the video at the top.
      {{ DiscussionBoard.errors[9423893].message }}
  • Profile picture of the author RobinInTexas
    You could get better help if you posted the url of a page example.
    Signature

    Robin



    ...Even if you're on the right track, you'll get run over if you just set there.
    {{ DiscussionBoard.errors[9424242].message }}
  • Profile picture of the author jbearnolimits
    How about I give you the code?

    This setup works fine when the screen is over 600px. But I want the columns to stack at 400px with the image on top followed by the left and then right columns. The tricky part is that I need to get the image out of the right column and have it placed over the left column without covering any content.

    It has to be done in css. I know there are other ways, but this is something I need a css answer for.

    This is what I have:

    Code:
    <div id="container1">
          <div id="container2">
                 <div id="leftcolumn">Content</div>
                 <div id="rightcolumn">Right Content including <img src="myimage.jpg" alt="image alt" id="puttop400-600px"></div>
    </div>
    </div>
    Now the css needs to be tweaked but this is what I have:

    Code:
    #container1 {
        width: 400px !important;
    }
    #container2 {
        margin: 0;
        padding: 20px 0 10px 0;
        width: 400px !important;
        background-color: #ffffff;
        position: relative;
        top: 0;
    }
    #leftcolumn {
       width: 380px !important;
    }
    #rightcolumn {
       text-align: center;
       width: 380px !important;
    }
    #puttop400-600px {
       width: 360px !important;
       height: 230px;
    }
    {{ DiscussionBoard.errors[9424654].message }}
  • Profile picture of the author ThomasDWright
    First and foremost thing that you have to take a complete knowledge of CSS. Then try to implement all the methods into your site.
    For the perfect CSS commands take the help of W3 schools.
    {{ DiscussionBoard.errors[9440907].message }}

Trending Topics