Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Jul 2012
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Having issues properly aligning divs on my page.

    Hello everyone .

    I'm having some problems aligning my portfolio page for my website. I had no issue aligning everything with tables, however when I decided to convert to divs the trouble came.

    This is my page: http://mindfuseproductions.com/portfolio/

    Basically what I want is for the "Digital Art" column to be all the way over to the left of the page.. the center in the center.. and the "Vector Logos" column all the way over to the right of the page. I almost have it.. but for some reason the "Vector Logos" is away from the right side.


    This is the page code:
    Code:
    <script type="text/javascript">
    
    var firstreel=new reelslideshow({
    	wrapperid: "myreel", //ID of blank DIV on page to house Slideshow
    	dimensions: [520, 226], //width/height of gallery in pixels. Should reflect dimensions of largest image
    	imagearray: [
    		["http://mindfuseproductions.com/images/websites/battleforums.png"], //["image_path", "optional_link", "optional_target"]
    		["http://mindfuseproductions.com/images/websites/penbooks.png", "http://en.wikipedia.org/wiki/Cave", "_new"],
    		["http://mindfuseproductions.com/images/websites/sequimpc.png"],
    		["http://mindfuseproductions.com/images/websites/penskill.png"],
    		["http://mindfuseproductions.com/images/websites/tyrion.png"],
    		["http://mindfuseproductions.com/images/websites/fantasyblog.png"] //<--no trailing comma after very last image element!
    	],
    	displaymode: {type:'auto', pause:2000, cycles:0, pauseonmouseover:true},
    	orientation: "h", //Valid values: "h" or "v"
    	persist: true, //remember last viewed slide and recall within same session?
    	slideduration: 300 //transition duration (milliseconds)
    })
    
    <!--
    updatepage();
    //-->
    </script>
    
    <div class="mainport">
    
            <div class="leftport">                     
                <iframe src="http://mindfuseproductions.com/digital.html" scrolling="no" frameborder="0" width="195" height="315"></iframe>          
               </div>
    
                <div class="rightport">                     
                <iframe src="http://mindfuseproductions.com/vector.html" scrolling="no" frameborder="0" width="195" height="315"></iframe>          
               </div>
    
               
                         <div class="centerport"><img src="http://mindfuseproductions.com/images/folio.png"/>
                <br />
              <img src="http://mindfuseproductions.com/images/websites.png">
                <br />
                
              <div id="myreel">
                <br />
    <div class="paginate"><a href="javascript:firstreel.navigate('back')" style="margin-right:180px;"><img src="http://mindfuseproductions.com/images/back.png" /></a>  <a href="javascript:firstreel.navigate('forth')"><img src="http://mindfuseproductions.com/images/fourth.png" /></a></div>
    </div>
    <br />
    <img src="http://mindfuseproductions.com/images/photography.png" />
    <br />
    
      <div id="motioncontainer" style="position:relative;overflow:hidden;">
    <div id="motiongallery" style="position:absolute;left:0;top:0;white-space: nowrap;">
    
    <nobr id="trueContainer">
    <a href="javascript:enlargeimage('http://mindfuseproductions.com/images/photography/bleeding.jpg', 520, 610)"><img src="http://mindfuseproductions.com/images/photography/thumbs/bleedingthumb.jpg" width="94" height="109" border=1></a>
    <a href="javascript:enlargeimage('http://mindfuseproductions.com/images/photography/falling.jpg', 800, 600)"><img src="http://mindfuseproductions.com/images/photography/thumbs/fallingthumb.jpg" width="146" height="109" border=1></a> 
    <a href="javascript:enlargeimage('http://mindfuseproductions.com/images/photography/marshlands.jpg', 800, 600)"><img src="http://mindfuseproductions.com/images/photography/thumbs/marshlandsthumb.jpg" width="146" height="109" border=1></a> 
    <a href="javascript:enlargeimage('http://mindfuseproductions.com/images/photography/red_reaching.jpg', 800, 600)"><img src="http://mindfuseproductions.com/images/photography/thumbs/red_reachingthumb.jpg" width="146" height="109" border=1></a>
    <a href="javascript:enlargeimage('http://mindfuseproductions.com/images/photography/natural.jpg', 800, 600)"><img src="http://mindfuseproductions.com/images/photography/thumbs/naturalthumb.jpg" width="146" height="109" border=1></a>
    <a href="javascript:enlargeimage('http://mindfuseproductions.com/images/photography/happy.jpg', 800, 473)"><img src="http://mindfuseproductions.com/images/photography/thumbs/happythumb.jpg" width="186" height="109" border=1></a>
    <a href="javascript:enlargeimage('http://mindfuseproductions.com/images/photography/the_much_needed_eye_pic.jpg', 527, 400)"><img src="http://mindfuseproductions.com/images/photography/thumbs/eyethumb.jpg" width="145" height="109" border=1></a>  
    <a href="javascript:enlargeimage('http://mindfuseproductions.com/images/photography/dark_corridor.jpg', 800, 596)"><img src="http://mindfuseproductions.com/images/photography/thumbs/darkcorridorthumb.jpg" width="147" height="109" border=1></a>
    <a href="javascript:enlargeimage('http://mindfuseproductions.com/images/photography/solitude.jpg', 625, 833)"><img src="http://mindfuseproductions.com/images/photography/thumbs/solitudethumb.jpg" width="82" height="109" border=1></a>
    <a href="javascript:enlargeimage('http://mindfuseproductions.com/images/photography/dark_beach.jpg', 800, 600)"><img src="http://mindfuseproductions.com/images/photography/thumbs/darkbeachthumb.jpg" border=1></a>
    <a href="javascript:enlargeimage('http://mindfuseproductions.com/images/photography/love.jpg', 621, 850)"><img src="http://mindfuseproductions.com/images/photography/thumbs/lovethumb.jpg" border=1></a> 
    <a href="javascript:enlargeimage('http://mindfuseproductions.com/images/photography/alone_.jpg', 800, 531)"><img src="http://mindfuseproductions.com/images/photography/thumbs/alonethumb.jpg" border=1></a> 
    <a href="javascript:enlargeimage('http://mindfuseproductions.com/images/photography/city_streets.jpg', 800, 505)"><img src="http://mindfuseproductions.com/images/photography/thumbs/citythumb.jpg" border=1></a> 
    <a href="javascript:enlargeimage('http://mindfuseproductions.com/images/photography/Sleepwalking.jpg', 800, 600)"><img src="http://mindfuseproductions.com/images/photography/thumbs/Sleepwalkingthumb.jpg" border=1></a>
    <a href="javascript:enlargeimage('http://mindfuseproductions.com/images/photography/hooray_for_herbs.jpg', 800, 600)"><img src="http://mindfuseproductions.com/images/photography/thumbs/herbsthumb.jpg" border=1></a>
    <a href="javascript:enlargeimage('http://mindfuseproductions.com/images/photography/tea_time.jpg', 800, 600)"><img src="http://mindfuseproductions.com/images/photography/thumbs/teatimethumb.jpg" border=1></a>
    <a href="javascript:enlargeimage('http://mindfuseproductions.com/images/photography/heavenly.jpg', 800, 600)"><img src="http://mindfuseproductions.com/images/photography/thumbs/heavenlythumb.jpg" border=1></a>
    <a href="javascript:enlargeimage('http://mindfuseproductions.com/images/photography/drops.jpg', 800, 600)"><img src="http://mindfuseproductions.com/images/photography/thumbs/dropsthumb.jpg" border=1></a>
    <a href="javascript:enlargeimage('http://mindfuseproductions.com/images/photography/christmas.jpg', 800, 600)"><img src="http://mindfuseproductions.com/images/photography/thumbs/christmasthumb.jpg" border=1></a>
    <a href="javascript:enlargeimage('http://mindfuseproductions.com/images/photography/elephant_seal.jpg', 800, 600)"><img src="http://mindfuseproductions.com/images/photography/thumbs/elephantsealthumb.jpg" border=1></a>
    <a href="javascript:enlargeimage('http://mindfuseproductions.com/images/photography/yawning.jpg', 800, 600)"><img src="http://mindfuseproductions.com/images/photography/thumbs/yawningthumb.jpg" border=1></a>
    <a href="javascript:enlargeimage('http://mindfuseproductions.com/images/photography/suffocation.jpg', 800, 600)"><img src="http://mindfuseproductions.com/images/photography/thumbs/suffocationthumb.jpg" border=1></a>
    <a href="javascript:enlargeimage('http://mindfuseproductions.com/images/photography/protector.jpg', 800, 600)"><img src="http://mindfuseproductions.com/images/photography/thumbs/protectorthumb.jpg" border=1></a>
    <a href="javascript:enlargeimage('http://mindfuseproductions.com/images/photography/nightmare.jpg', 800, 600)"><img src="http://mindfuseproductions.com/images/photography/thumbs/nightmarethumb.jpg" border=1></a>
    <a href="javascript:enlargeimage('http://mindfuseproductions.com/images/photography/frozen_silence.jpg', 800, 600)"><img src="http://mindfuseproductions.com/images/photography/thumbs/frozensilencethumb.jpg" border=1></a>
    <a href="javascript:enlargeimage('http://mindfuseproductions.com/images/photography/cold.jpg', 800, 600)"><img src="http://mindfuseproductions.com/images/photography/thumbs/coldthumb.jpg" border=1></a>
    <a href="javascript:enlargeimage('http://mindfuseproductions.com/images/photography/lightdarkness.jpg', 589, 900)"><img src="http://mindfuseproductions.com/images/photography/thumbs/lightthumb.jpg" border=1></a>
    <a href="javascript:enlargeimage('http://mindfuseproductions.com/images/photography/safety_within.jpg', 800, 730)"><img src="http://mindfuseproductions.com/images/photography/thumbs/safetythumb.jpg" border=1></a>
    <a href="javascript:enlargeimage('http://mindfuseproductions.com/images/photography/midnightwish.jpg', 800, 600)"><img src="http://mindfuseproductions.com/images/photography/thumbs/wishthumb.jpg" border=1></a>
    <a href="javascript:enlargeimage('http://mindfuseproductions.com/images/photography/lightindarkness.jpg', 800, 600)"><img src="http://mindfuseproductions.com/images/photography/thumbs/lightdarkthumb.jpg" border=1></a>
    
    </nobr>
    
    </div>
    </div>
          </div>
          </div>

    This is the CSS regarding the page:
    Code:
    .mainport {
    	position:static;
    	width:100%;
    	height:100%;
    	color:#fff;
        background:%000;
    }
    
    .leftport {
    	position:relative;
    	float:left;
    	width:30%;
    	height:100%;
    	}
    
    .rightport {
    	position:relative;
    	float:right;
    	width:30%;
    	height:100%;
    }
    
    .centerport {
    	float:left;
    	position:static;
    	width:525px;
    	text-align:center;
    }
    
    #motioncontainer {
    width:expression(Math.min(this.offsetWidth, maxwidth)+'px');
    }
    and lastly this is the gallerystyle.css file which assigns properties to the scrolling gallery on the bottom / middle:

    Code:
    /* Gallery Styles */
    
    #motioncontainer {
    /*margin:0 auto;  Uncomment this line if you wish to center the gallery on page */
    width: 700px; /* Set to gallery width, in px or percentage */
    height: 130px; /* Set to gallery height */
    }
    
    #motioncontainer a img {
    border: 1px solid #cccccc; /* Set image border color */
    }
    
    #motioncontainer a:hover img {
    border: 1px solid navy; /* Set image border hover color */
    }
    
    #statusdiv {
    background-color: lightyellow;
    border: 1px solid gray;
    padding: 2px;
    position: relative; /* Stop Editing Gallery Styles */
    left: -300px;
    visibility: hidden;
    }
    
    #motioncontainer a:hover {
    color: red; /* Dummy definition to overcome IE bug */
    }
    /* End Gallery Styles */

    If anyone could help me, I'd be really appreciative!

    Thanks!

  • #2
    Regular Coder
    Join Date
    Dec 2010
    Posts
    424
    Thanks
    22
    Thanked 56 Times in 56 Posts
    The problem lies in your iframe.
    You are floating the Vector logo right, and it has a 30% width.
    But the problem is that the iFrame content does not fit the 30%, and is NOT floated left.
    Is there a particular reason you are iframing this content in and not just creating it yourself.

  • Users who have thanked aaronhockey_09 for this post:

    Tyrion (07-06-2012)

  • #3
    New to the CF scene
    Join Date
    Jul 2012
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts
    I figured the iframe was the problem.

    I'm actually fairly new to divs.. I've always relied on tables, but I understand that they're pretty much obsolete now for main content.

    Now that I think of it though, couldn't I just use scrolling divs? Do you think that would fix the problem?

    -edit

    if you get a chance, take a look now. Looks like I fixed it by applying a style tag to the iframe's to float them to the appropriate sides. Do you think that is sufficient, or should I do away with the iframes all together?

    -edit -edit

    http://mindfuseproductions.com/portfolio/

    Now the center is over to the left.. do you know how I could center that, so it's actually in the center of the page? really appreciate the help btw
    Last edited by Tyrion; 07-06-2012 at 01:11 AM.

  • #4
    Regular Coder
    Join Date
    Dec 2010
    Posts
    424
    Thanks
    22
    Thanked 56 Times in 56 Posts
    Quote Originally Posted by Tyrion View Post
    I figured the iframe was the problem.

    I'm actually fairly new to divs.. I've always relied on tables, but I understand that they're pretty much obsolete now for main content.

    Now that I think of it though, couldn't I just use scrolling divs? Do you think that would fix the problem?

    -edit

    if you get a chance, take a look now. Looks like I fixed it by applying a style tag to the iframe's to float them to the appropriate sides. Do you think that is sufficient, or should I do away with the iframes all together?

    -edit -edit

    http://mindfuseproductions.com/portfolio/

    Now the center is over to the left.. do you know how I could center that, so it's actually in the center of the page? really appreciate the help btw
    Hey, looks like your getting it.
    I personally would just do away with the iFrame, but maybe you could just do that once you get everything else working the way you want.
    And it looks like you got the centering working

    I see you have margin:0 auto; which is what i do to center everything.

  • #5
    Regular Coder
    Join Date
    Dec 2010
    Posts
    424
    Thanks
    22
    Thanked 56 Times in 56 Posts
    Quote Originally Posted by aaronhockey_09 View Post
    Hey, looks like your getting it.
    I personally would just do away with the iFrame, but maybe you could just do that once you get everything else working the way you want.
    And it looks like you got the centering working

    I see you have margin:0 auto; which is what i do to center everything.
    On the portfolio page, the CSS for the center div is this

    Code:
    .centerport {
    margin: 0 auto;
    float: left;
    min-width: 600px;
    position: static;
    text-align: center;
    }
    Remove Float left to center it.


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •