...

View Full Version : three divs in a row with object in middle



Energia
01-27-2012, 12:57 PM
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..?

nameno
01-27-2012, 02:57 PM
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

teedoff
01-27-2012, 03:50 PM
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

Keleth
01-27-2012, 04:13 PM
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)

leanocodes
01-28-2012, 11:27 AM
Just make sure to clear:both them after float:left every DIVS.

Hope this helps.

Cheers!

Arman

coothead
01-28-2012, 01:14 PM
Hi there Energia,

try it like this...


<!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

Energia
02-02-2012, 06:14 PM
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!

coothead
02-02-2012, 08:53 PM
Hi there Energia,

does this help...


<!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

Energia
02-06-2012, 12:22 PM
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:


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!!! :thumbsup:



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum