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 9 of 9
  1. #1
    New Coder
    Join Date
    Dec 2010
    Posts
    99
    Thanks
    18
    Thanked 0 Times in 0 Posts

    three divs in a row with object in middle

    I am trying to float one div left, one object in the middle, and float another div to the right.

    My page is kind of ugly but here is the adress: www.koanuka.com/fic

    Is there something special to think about when you want to float three divs in a row when the one in the middle is an object? I don´t know what to try more..?

  • #2
    New Coder
    Join Date
    Jan 2012
    Location
    Romania
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts
    float left the left menu (the div that contains the menu)
    float left the middle div(the object div)
    float right the right menu (the div that contains the menu)

    then clear the float with clear:both; command

    this should do the trick

  • #3
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,338
    Thanks
    5
    Thanked 363 Times in 360 Posts
    umm What "divs" are you trying to float?

    I see three round images in LISTS, not divs, is this what you're talking about? If so you have a width on those divs containing your <ul> thats too small to allow them to float yet.

    But li {float: left;} would work after removing that width of 126px
    Teed

  • #4
    Senior Coder
    Join Date
    Jun 2008
    Location
    New Jersey
    Posts
    2,537
    Thanks
    45
    Thanked 259 Times in 256 Posts
    I would also explore clearfix over clear: both.

    Clearfix is a css hack that gives the container you have floated objects within a height equal to the content, allowing it to act as if the objects within were not floated. There are a number of clearfix techniques, and I think looking at them in whole is worthwhile (I personally use http://www.webtoolkit.info/css-clearfix.html)

  • #5
    New to the CF scene
    Join Date
    Jan 2012
    Location
    Philippines
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Just make sure to clear:both them after float:left every DIVS.

    Hope this helps.

    Cheers!

    Arman

  • #6
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,714
    Thanks
    0
    Thanked 238 Times in 233 Posts
    Hi there Energia,

    try it like this...
    Code:
    
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <base href="http://www.koanuka.com/fic/"><!--this is for testing and may be removed --> 	
    <!-- meta -->
    <meta http-equiv="content-language" content="pt-br">
    <meta http-equiv="content-type" content="text/html;charset=ISO-8859-1">
    <meta name="keywords" content="Intercambio">
    <meta name="description" content="Fic Intercambios">
    <title>FIC Intercambios</title>
    <!-- icon-->
    <link rel="shortcut icon" type="image/png" href="images/ficintercambio.png">
    <link rel="icon" type="image/png" href="images/ficintercambio.png">
    <!-- css -->
    <link rel="stylesheet" type="text/css" href="style.css">
    <style type="text/css">
    #menybar #home{margin-left:67px;}
    #submenu {float:left;padding-left:10px}
    #submenu ul,#rightmenu ul{margin:10px 0 0 0;padding:0;}
    #rightmenu {float:right;padding-right:10px;}
    #flash {margin:auto;}
    </style>
    </head>
    <body>
    <!-- page -->
    <div id="page">
    <!-- header -->
    <div id="header">
    <a href="index.html"><img src="images/fic_intercambios.jpg" alt="Fic Intercombio" width="209" height="153"></a>
    <!-- header slut -->
    </div>
    <!-- menubar -->
    <div id="menybar">
    <ul>
     <li id="home"><a href="index.html"><img src="images/home_sel.jpg" alt="Home" width="120" height="41"></a></li>
     <li id="conheca"><a href="fic.html"><img src="images/conheca_fic.jpg" alt="conheça aFIC" width="120" height="41"></a></li>
     <li id="intercambio"><a href="intercambio.html"><img src="images/intercambio_colegio.jpg" alt="Intercâmbio" width="120" height="41"></a></li>
     <li id="turismo"><a href="turismo.html"><img src="images/turismo.jpg" alt="Turismo" width="120" height="41"></a></li>
     <li id="outros"><a href="outros_servicos.html"><img src="images/outros_servicos.jpg" alt="Outros serviços" width="120" height="41"></a></li>
     <li id="dicas"><a href="dicas.html"><img src="images/dicas.jpg" alt="Dicas" width="120" height="41"></a></li>		  
     <li id="contato"><a href="fale_conosco.html"><img src="images/fale_conosco.jpg" alt="Fale conosco" width="120" height="41"></a></li>
    </ul>
    </div>
    <!-- menubar slut-->
    <!-- content --> 
    <div id="content">
    <div id="submenu">
    <ul>
    <li id="passagens"><a href="index.html"><img src="images/passagens.jpg" alt="passagéns" width="126" height="130"></a></li>
    <li id="acomodacoes"><a href="index.html"><img src="images/acomodacoes.jpg" alt="Acomodações" width="126" height="130"></a></li>
    <li id="pacotes"><a href="index.html"><img src="images/pacotes_sel.jpg" alt="pacotes" width="126" height="130"></a></li>
    </ul>
    </div>
    <div id="rightmenu">
    <ul>
    <li id="carteiras"><a href="index.html"><img src="images/carteiras.jpg" alt="Carteiras de Estudante/Professor" width="126" height="130"></a></li>
    <li id="travel"><a href="index.html"><img src="images/travel.jpg" alt="Travel Money" width="126" height="130"></a></li>
    <li id="viagem"><a href="index.html"><img src="images/viagem.jpg" alt="Assistência Médica de Viagem" width="126" height="130"></a></li>
    </ul>
    </div>
    <div id="flash">
    <object type="application/x-shockwave-flash" width="700" data="images/fic_edit.swf" height="400" title="Fic intercambio e turismo">
    <param name="movie" value="images/fic_edit.swf">
    <param name="quality" value="high">
    </object>
    </div>
    <!-- content slut -->
    </div>
    <!-- footer -->
    <div id="footer">
    <!-- footer slut -->
    </div>
    <!-- page slut -->
    </div>
    </body>
    </html>
    
    Note:-
    You can, of course, move my css amendments to your stylesheet.

    coothead

  • #7
    New Coder
    Join Date
    Dec 2010
    Posts
    99
    Thanks
    18
    Thanked 0 Times in 0 Posts

    positon lists with object and background image

    I am overwhelmed by all the feedback!

    nameno and leanocodes: Thanks for teaching me that two of my element must float left and last one right, and then clear.

    teedoft: You really open my eyes! I understood now my div did not add anything (if Iam not wrong). Also to remove the width.

    keleth: Thank you for that intresting link about clearfix. I have been study about it, still don´t really get it though but I have it in the back of my head and maybe I will understand how to use it.

    coothead: Great! Thanks for showing me how I could move the menu bar to the middle, great bonus! When I tested your code it seams to work perfect through w3schools Tryit Editor! But I just can´t make it with my own code. I have done some changes. Instead of images I use only background image. But what is it that make your example float perfect? Would you like to tace a look at my code now: www.koanuka.com/fic and see if I have to add or change something?

    I have tried all good advice I got, learned a lot, but still can´t get all the information I got to get it togheter.

    Thanks all of you for sharing your knowledge!

  • #8
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,714
    Thanks
    0
    Thanked 238 Times in 233 Posts
    Hi there Energia,

    does this help...
    Code:
    
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
    "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <base href="http://www.koanuka.com/fic/"><!--this is for testing and may be removed -->  	
    
    <meta http-equiv="content-language" content="pt-br">
    <meta http-equiv="content-type" content="text/html;charset=ISO-8859-1">
    <meta name="keywords" content="Intercambio">
    <meta name="description" content="Fic Intercambios">
    
    <title>FIC Intercambios</title>
    
    <link type="image/png"  rel="shortcut icon"href="images/ficintercambio.png">
    <link type="image/png" rel="icon" href="images/ficintercambio.png">
    
    <style type="text/css">
    html, body{  
        margin:0;
        padding:0;
        background-color:#dfe9ac;
     }
    #page{
        width:1055px;
        margin:auto;
        background-color:#fff;
        box-shadow:#333 10px 0 20px,#333 -10px 0 20px
     }
    #header{
        height:153px;
        background-image:url('images/high_school_intercambio.jpg');  
     }
    #header img {
        display:block;
        width:209px;
        height:153px;
        border:0;}	
    #menybar {
        height:50px; 
        padding:0 0 0 108px; 
        margin:0; 
        list-style-type:none;
     }
    #menybar li {
        float:left;
     }
    #menybar li a {
        display:block;
        background-repeat:no-repeat;
     }
    #home {background-image:url('images/home_sel.jpg');}
    #conheca {background-image:url('images/conheca_fic_sel.jpg');}
    #intercambio {background-image:url('images/intercambio_colegio_sel.jpg');}
    #turismo {background-image:url('images/turismo_sel.jpg');}
    #outros {background-image:url('images/outros_servicos_sel.jpg');}
    #dicas {background-image:url('images/dicas_sel.jpg');}
    #contato {background-image:url('images/fale_conosco_sel.jpg');}
    #menybar img {
        display:block;
        width:120px;
        height:41px;
        border:0;
     }
    #menybar a:hover img{
        visibility: hidden;
     }    
    #submenu,#rightmenu { 
        float:left;
        width:177px;
        padding:97px 0 0 0; 
        margin:0; 
        list-style-type:none;
     }
    #submenu li {
        line-height:41px;
        padding-left:54px;
        margin-bottom:41px;
        font-family:'comic sans','comic sans ms',cursive;
        font-size:12px;
        background-image:url('images/intercambio_highschool.png');
        background-repeat:no-repeat;
        background-position:10px 0;
     }
    #submenu a,#submenu a:visited,#submenu a:active,
    #rightmenu a,#rightmenu a:visited,#rightmenua:active  {
        color:#000;
        text-decoration:none; 
     }
    #submenu a:hover,#rightmenu a:hover {
        color:#f00;
     }
    #rightmenu {
        float:right;
        width:177px;
     }
    #rightmenu li {
        height:41px;
        padding:0 54px 0 10px;
        margin-bottom:41px;
        font-family:'comic sans','comic sans ms',cursive;
        font-size:12px;
        background-image:url(images/intercambio_highschool.png);
        background-repeat:no-repeat;
        background-position:128px 0;
     }
    #rightmenu #lh {
        line-height:41px;
     }
    #flash {  
        width:700px;
        margin:0 auto 10px;
        box-shadow:#333 4px 4px 8px;
     }
    #flash object {
        display:block; 
        width:700px;
        height:400px; 			 
     }
    #footer {
        height:175px;
        background-image:url('images/colegio.jpg');
     }
    </style>
    
    </head>
    <body>
    
    <div id="page">
    
    <div id="header">
      <a href="index.html"><img src="images/fic_intercambios.jpg" alt="Fic Intercombio"></a>
    </div>
    
    
    <ul id="menybar">
     <li id="home"><a href="index.html"><img src="images/home_sel.jpg" alt="Home"></a></li>
     <li id="conheca"><a href="fic.html"><img src="images/conheca_fic.jpg" alt="conheça aFIC"></a></li>
     <li id="intercambio"><a href="intercambio.html"><img src="images/intercambio_colegio.jpg" alt="Intercâmbio"></a></li>
     <li id="turismo"><a href="turismo.html"><img src="images/turismo.jpg" alt="Turismo"></a></li>
     <li id="outros"><a href="outros_servicos.html"><img src="images/outros_servicos.jpg" alt="Outros serviços"></a></li>
     <li id="dicas"><a href="dicas.html"><img src="images/dicas.jpg" alt="Dicas"></a></li>		  
     <li id="contato"><a href="fale_conosco.html"><img src="images/fale_conosco.jpg" alt="Fale conosco"></a></li>
    </ul>
    
    <ul id="submenu">
     <li><a href="index.html">Passagéns</a></li>
     <li><a href="index.html">Acomodações</a></li>
     <li><a href="index.html">pacotes</a></li>
    </ul>
    	      
    <ul id="rightmenu">
     <li><a href="index.html">Carteiras de Estudante/Professor</a></li>
     <li id="lh"><a href="index.html">Travel Money</a></li>
     <li><a href="index.html">Assistência Médica de Viagem</a></li>
    </ul>
    
    <div id="flash">
    <object type="application/x-shockwave-flash" data="images/fic_edit.swf" title="Fic intercambio e turismo">
     <param name="movie" value="images/fic_edit.swf">
     <param name="quality" value="high">
    </object>
    </div>
    
    <div id="footer"></div>
    
    </div><!-- end #page -->
    
    </body>
    </html>
    
    coothead

  • Users who have thanked coothead for this post:

    Energia (02-06-2012)

  • #9
    New Coder
    Join Date
    Dec 2010
    Posts
    99
    Thanks
    18
    Thanked 0 Times in 0 Posts

    Thumbs up Thanks you coothead!

    WOW! I learned a lot form you coothead and you really lifted my page! Thanks for sharing your box-shadow design! To make it work in all browsers I did like this:

    Code:
        box-shadow:#333 4px 4px 8px;
    	-moz-box-shadow:#333 4px 4px 8px;
      -webkit-box-shadow:#333 4px 4px 8px;
    It seams to work!

    I am amazed how your clean code made everything float perfect! I understood I had some unnecessary rules and div.

    With the code now I have trouble to make my image with text gallery to float three in a row. Plus to get the image meny be in middle and without list-style-types. When I used divs the content goes out of the page and footer and when I don´t use divs it works but doesen´t line up three in a row. Im working on it and testing, but feel free to give a hint!
    Thanks for sharing your knowledge plus the extra nice design!!!


  •  

    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
    •