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 2 of 2

Thread: Center 2 divs.

  1. #1
    New Coder
    Join Date
    Jun 2013
    Posts
    27
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Center 2 divs.

    Allright let's say i want the iframe and the text next to each other centred on my page. been trying around but couldn't quite figure out.
    HTML
    Code:
    <div id="content-4">
              	<div class="container-4">
              <lu>
              	<li>
             <span id="title-logo-about">About</span>
             	</li>
                
                 <li id="text-about">
              <span class="koptekst">Iets meer over mij</span><br><br>
              Ik ben een interactief ontwerper uit Zeewolde.<br>
              Met veel plezier design ik producten zoals;<br>
              posters, logo's en websites etc.<br><br>
              Op dit moment ben ik nog bezig met mijn opleiding op het CIBAP <br>
              in Zwolle hier doe ik de opleiding Multi-media vormgever<br>
              om zo nog meer te leren over het vak en hier gespecialiseerd<br>
              in te raken en zo nog beter werk af te leveren.
              
              </li>
            
                <li>
              <iframe id="map" width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.nl/maps?f=q&amp;source=s_q&amp;hl=nl&amp;geocode=&amp;q=Smaragd+81+zeewolde&amp;aq=&amp;sll=52.486129,6.425294&amp;sspn=0.956701,2.612&amp;ie=UTF8&amp;hq=&amp;hnear=Smaragd+81,+3893+ES+Zeewolde,+Flevoland&amp;t=m&amp;z=14&amp;ll=52.335102,5.522786&amp;output=embed"></iframe>
              </li>
             
              </ul>
            </div>
    CSS
    Code:
    .container-4{
    margin: 0 auto;
      
    }
    .koptekst{
    		font-size:24px;
    		font-family: 'Open Sans';
    	font-style:italic;
    	position:relative;
    	color:#454545;
    }
    	
    #text-about{
    	display:inline;
    	position:relative;
    	top:230px;
    	color:#000;
    	text-decoration:none;
    	
    	
    }
    #title-logo-about{
    	top:100px;
    	font-size:24px;
    		font-family: 'Open Sans';
    	font-style:italic;
    	position:relative;
    	color:#454545;
    }
    #map{
    	position:absolute;
    	display:block;
        background-color: #777;
    	top:250px;
    	-webkit-box-shadow: 0 8px 6px -6px black;
    	   -moz-box-shadow: 0 8px 6px -6px black;
    	        box-shadow: 0 8px 6px -6px black;
    }
    
    #content-4{
    		top:-35px;
    	float:left;
    	width: 100%;
    	height: 700px;
    	padding: 0px 0;
    	margin: 0 auto;
    	position: relative;
    	overflow: hidden;
    	text-align:center;
    		background-color:#FFF;
    	
    	 box-shadow: inset 0px 0px 6px rgba(0,0,0,0.2);
        -o-box-shadow: inset 0px 0px 6px rgba(0,0,0,0.2);
        -ms-box-shadow: inset 0px 0px 6px rgba(0,0,0,0.2);
        -moz-box-shadow: inset 0px 0px 6px rgba(0,0,0,0.2);
        -webkit-box-shadow: inset 0px 0px 6px rgba(0,0,0,0.2)
    }
    thank you

  • #2
    Regular Coder
    Join Date
    Aug 2012
    Posts
    116
    Thanks
    0
    Thanked 25 Times in 25 Posts
    Hi DesignedbyLau,

    i fiddled with your post and took out your CSS's just to see if this will work for you. This should have both your div and iframe side by side...

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <style type="text/css">
    li{
    list-style-type:none;
    }
    .box{
    float:left;
    width:510px;
    }
    .shift{
    width:865px;
    margin:0 auto;
    }
    </style>
    </head>
    <body>
             <ul>
    <div class="shift">
    <div class="box">
                <li><span id="title-logo-about">About</span></li>
                <li id="text-about"><span class="koptekst">Iets meer over mij</span>
              Ik ben een interactief ontwerper uit Zeewolde.<br>
              Met veel plezier design ik producten zoals;<br>
              posters, logo's en websites etc.<br><br>
              Op dit moment ben ik nog bezig met mijn opleiding op het CIBAP <br>
              in Zwolle hier doe ik de opleiding Multi-media vormgever<br>
              om zo nog meer te leren over het vak en hier gespecialiseerd<br>
              in te raken en zo nog beter werk af te leveren.
                        </li>
          </div>
    
                <li>
              <iframe id="map" width="350" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.nl/maps?f=q&amp;source=s_q&amp;hl=nl&amp;geocode=&amp;q=Smaragd+81+zeewolde&amp;aq=&amp;sll=52.486129,6.425294&amp;sspn=0.956701,2.612&amp;ie=UTF8&amp;hq=&amp;hnear=Smaragd+81,+3893+ES+Zeewolde,+Flevoland&amp;t=m&amp;z=14&amp;ll=52.335102,5.522786&amp;output=embed"></iframe>
              </li>
      </div>     
              </ul>
    </body>
    </html>
    i suppose if you still want to have another div, just place the iframe within another div tag.

    Actually you may not even need to place a width property on the box class...so long as the combination of your div and iframe (or div) don't exceed the 865px width given by the wrapper class shift.

    hope this helps
    Last edited by Brandnew; 06-28-2013 at 05:14 AM.
    1 Corinthians 15:3-4 / Ephesians 2:8-9 - What or Who are you living for?


  •  

    Posting Permissions

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