Need some suggestions for align three floating divs

Discussion in 'Web Design' started by Lita, Oct 26, 2012.

to remove all ads.
  1. Lita

    Lita New Member

    Messages:
    31
    So I am still pretty new to web design and am working on a website. A problem I have run into a problem that I cant find a solution to and was hoping some one here could make a suggestion to fix it. I have three divs that I want to align horizontally but I want to keep them centered and have them float so they can be mobile friendly. I've tried Span's and since they are separate divs I couldnt get it to work, hopefully you guys could make a suggestion.

    Here is the HTML:

    HTML:
    <!DOCTYPE html>
    <head>
    
    <title>Mama Cakes</title>
    
    <link rel="stylesheet" type="text/css" href="style.css" />
    
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    <script type="text/javascript" src="js/infiniteCarousel/jquery.infinitecarousel.js"></script>
    <script type="text/javascript">
    $(function(){
    	$('#carousel').infiniteCarousel();
    });
    </script>
    
    </head>
    
    
    <body>
    
    <div id= "container">
    <center>
    
    <div id= "headerimg">
    
    <img src="http://img.photobucket.com/albums/v134/Invadergir1612/Logo.png" />
    
    </div>
    
    <div id= "header">
    
    <h1>Cupcakes Make Everything Better</h1>
    
    </div>
    
    <div id= "navbar">
    <a href="url">Menu</a>
    <a href="url">Menu</a>
    <a href="url">Menu</a>
    
    </div>
    
    <div id="carousel" >
    <ul>
    	<li><img alt="" src="http://img.photobucket.com/albums/v134/Invadergir1612/Carousel_image.png" width="800" height="250" /><p>This carousel has no padding applied to it so you won't see hints for the previous and next images. Also, the progress bar could be disabled by setting just one option on the plugin.</p></li>
    	<li><img alt="" src="http://img.photobucket.com/albums/v134/Invadergir1612/Carousel3.jpg" width="800" height="250" /><p>This is the caption for the second image. The height of the caption box is an option.</p></li>
    	<li><img alt="" src="http://img.photobucket.com/albums/v134/Invadergir1612/Carousel2.jpg" width="800" height="250" /></li>
    
    </ul>
    </div>
    
    <div id= "content">
    
    <h1>Welcome To Mama Cakes</h1>
    <p>
    Mama cakes is a family owned and family run cupcake bakery. All of our cupcakes are baked fresh from scratch using the finest ingredients. our display case is filled daily with a large variety of cupcakes. Along with delicious cupcakes we also have custom cupcakes, custom cakes, cake pops, and gran-val scoop ice cream. Our flavors range from simply delicious vanilla dream to sinfully delicious death by chocolate . We also have our cocktail inspired cupcakes that include the Paddy and margarita. Every first Monday of the month we introduce the wacky flavor of the month and our flavor list is always growing. So whether your in the mood for something traditional or something different Mama Cakes has what your looking for.
    </p>
    </div>
    
    
    <div id= "bottomcontent">
    
    
    <div id= "Facetwit">
    Facebook and Twitter goes here.
    <div id= "Visit">
    Visit Us Goes Here
    </div>
    <div id= "Cater">
    Catering Goes Here
    </div>
    </div>
    </div>
    </center>
    </div>
    </body>
    


    Here is the CSS:

    HTML:
    body 				
    
    	{background-image:url('http://img.photobucket.com/albums/v134/Invadergir1612/Dotsbg.jpg');
    	no-repeat
    	
    	}
    
    #container
    	{
    	margin: 0 auto;
    	
    	}
    	
    	
    #headerimg
    	{
    	
    	
    	}
    	
    	
    #header
    	{
    	
    	
    	}
    	
    
    #navbar
    	{
    
    	}
    
    	
    #navbar
    	{
    	border-width:20px;
    	width:-960px;
    	padding:15px 10px;
    	-moz-border-image: url("http://img.photobucket.com/albums/v134/Invadergir1612/navbar.png") 0 14 0 14 stretch; /* Firefox */
    	-webkit-border-image: url("http://img.photobucket.com/albums/v134/Invadergir1612/navbar.png") 0 14 0 14 stretch; /* Safari */
    	-o-border-image: url("http://img.photobucket.com/albums/v134/Invadergir1612/navbar.png") 0 14 0 14 stretch; /* Opera */
    	border-image: url("http://img.photobucket.com/albums/v134/Invadergir1612/navbar.png") 0 14 0 14 stretch;
    
    	}
    	
    	
    
    /*#carousel
    	{
    	position: absolute;
    	left: 350px;
    	top: 100px;
    	}
    */
    
    
    #carousel ul {
    	list-style: none;
    	width:1600px;
    	margin: 0;
    	padding: 0;
    	position:relative;
    }
    #carousel li {
    	display:inline;
    	float:left;
    }
    
    
    
    #content
    	{
    	background-color: white;
    	padding: 10px;
    	margin: 20px;
    	box-shadow: 5px 5px 5px #888888;
    	
    	
    	}
    	
    	
    
    #bottomcontent
    	{
    	
    	display: inline;
    	
    	}
    	
    	
    	
    	
    #Facetwit
    	{
    	background-color: white;
    	padding: 10px;
    	margin: 20px;
    	width: 200px;
    	height: 150px;
    	box-shadow: 5px 5px 5px #888888;
    	
    	}
    	
    	
    #Visit
    	{
    	background-color: white;
    	padding: 10px;
    	margin: 20px;
    	width: 200px;
    	height: 150px;
    	box-shadow: 5px 5px 5px #888888;
    	
    	}
    	
    	
    	
    #Cater
    	{
    	background-color: white;
    	padding: 10px;
    	margin: 20px;
    	width: 200px;
    	height: 150px;
    	box-shadow: 5px 5px 5px #888888;
    	
    	}
    

    Here is what I want it to look like:

    [​IMG]
     
    Last edited: Oct 26, 2012
  2. chrishirst

    chrishirst Well-Known Member Staff Member

    Messages:
    2,611
    You can have floated or you can have centred, you can't have both.

    You can "fudge it" by setting one to float right, one to float left and the third with auto L&R margins to centre it, and float: none; to keep it in the same plane.

    The right float MUST be first of the three in the normal flow as well.
     
  3. Lita

    Lita New Member

    Messages:
    31
    Thank you chrishirst, I will try that.
     
  4. Phreaddee

    Phreaddee Super Moderator Staff Member

    Messages:
    1,978
    centre the wrapper then
    float the divs
     
  5. Lita

    Lita New Member

    Messages:
    31
    Thanks for the suggestions but that didnt work. This is what happened:

    [​IMG]
     
  6. Phreaddee

    Phreaddee Super Moderator Staff Member

    Messages:
    1,978
    try...
    HTML:
    <div id= "bottomcontent">
          <div id= "Facetwit"> Facebook and Twitter goes here.</div>
            <div id= "Visit"> Visit Us Goes Here </div>
            <div id= "Cater"> Catering Goes Here </div>
     
        </div>
    
    you had 'visit' and 'cater' inside of 'facetwit'

    and I would float them all left.
     
  7. Lita

    Lita New Member

    Messages:
    31
    Wow I cant believe I missed that, thank you for catching that Phreaddee it works perfectly now, now I just have to work on centering them. Thank you for all the help you guys.
     
    Last edited: Oct 27, 2012
  8. chrishirst

    chrishirst Well-Known Member Staff Member

    Messages:
    2,611
    by the way:

    If you simply want to centre-align image elements in a parent you can apply text-align: center: to it and as images are inline elements they will obey.
     
  9. Lita

    Lita New Member

    Messages:
    31
    Good to know, thank you for your help and advice.
     
  10. Lita

    Lita New Member

    Messages:
    31
    I have one more question for you guys, I know its probably a simple fix or a silly mistake but I am having some problems with the h1 header. I want it to align left to the logo, like I have it in the image above, however I can only get it to hover beneath it. This would be fine in a mobile state but not for the actual website. I have tried using margins and floats but nothing is working. Could you recommend something else? Here is the revised HTML page

    HTML:
    <!DOCTYPE html>
    <head>
    
    
    <title>Mama Cakes</title>
    
    <link rel="stylesheet" type="text/css" href="style.css" />
    
    
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    <script type="text/javascript" src="js/infiniteCarousel/jquery.infinitecarousel.js"></script>
    <script type="text/javascript">
    $(function(){
    	$('#carousel').infiniteCarousel();
    });
    </script>
    
    
    
    
    </head>
    
    <body>
    
    <div id= "container">
    <center>
    
    
    <div id= "headerimg">
    
    <img src="http://img.photobucket.com/albums/v134/Invadergir1612/Logo.png" />
    
    </div>
    
    
    
    <div id= "header">
    
    <h1>Cupcakes Make Everything Better</h1>
    
    </div>
    
    
    
    
    <div id= "navbar">
    <a href="url">Menu</a>
    <a href="url">Menu</a>
    <a href="url">Menu</a>
    <a href="url">Menu</a>
    <a href="url">Menu</a>
    <a href="url">Menu</a>
    <a href="url">Menu</a>
    <a href="url">Menu</a>
    <a href="url">Menu</a>
    
    </div>
    
    
    
    <div id="carousel" >
    <ul>
    	<li><img alt="" src="http://img.photobucket.com/albums/v134/Invadergir1612/Carousel_image.png" width="800" height="250" /><p>This carousel has no padding applied to it so you won't see hints for the previous and next images. Also, the progress bar could be disabled by setting just one option on the plugin.</p></li>
    	<li><img alt="" src="http://img.photobucket.com/albums/v134/Invadergir1612/Carousel3.jpg" width="800" height="250" /><p>This is the caption for the second image. The height of the caption box is an option.</p></li>
    	<li><img alt="" src="http://img.photobucket.com/albums/v134/Invadergir1612/Carousel2.jpg" width="800" height="250" /></li>
    	
    
    </ul>
    </div>
    
    
    <div id= "content">
    
    <h1>Welcome To Mama Cakes</h1>
    <p>
    Mama cakes is a family owned and family run cupcake bakery. All of our cupcakes are baked fresh from scratch using the finest ingredients. our display case is filled daily with a large variety of cupcakes. Along with delicious cupcakes we also have custom cupcakes, custom cakes, cake pops, and gran-val scoop ice cream. Our flavors range from simply delicious vanilla dream to sinfully delicious death by chocolate . We also have our cocktail inspired cupcakes that include the Paddy and margarita. Every first Monday of the month we introduce the wacky flavor of the month and our flavor list is always growing. So whether your in the mood for something traditional or something different Mama Cakes has what your looking for.
    </p>
    </div>
    
    
    
    <div id= "bottomcontent">
    
    
    <div id= "Facetwit"> 
    
    <a href="https://www.facebook.com/pages/Mama-Cakes/188302341183750">
    <img border="0" src="http://img.photobucket.com/albums/v134/Invadergir1612/facebookicon2.png" alt="Facebook Link"></a>
    
    <a href="https://twitter.com/visitmamacakes">
    <img border="0" src="http://img.photobucket.com/albums/v134/Invadergir1612/twittericon.png" alt="Twitter Link"></a>
    
    <div id= "Facetwitbottom"> 
    
    Follow us on Facebook and Twitter
    
    </div>
    </div>
    
    
    <div id= "Visit"> 
    
    <a href="visit.html">Visit Us</a>
    
    
    <div id= "Visitbottom"> 
    
    Want To Visit Us? Click the link above for directions.
    
    </div>
    
    </div>
    
    
    <div id= "Contact"> 
    
    <a href="contact.html">Contact Us</a>
    
    
    <div id= "contactbottom"> 
    
    Click here to contact us
    
    </div>
    
    </div>
     
    </div>
    
    
    
    <div id= "footer">
    
    &copy; Mama Cakes 2012
    
    </div>
    
    
    </center>
    </div>
    </body>
    
    


    and the CSS

    HTML:
    body 				
    
    	{background-image:url('http://img.photobucket.com/albums/v134/Invadergir1612/Dotsbg.jpg');
    	no-repeat
    	
    	}
    
    #container
    	{
    	margin: 0 auto;
    	
    	}
    	
    #headerimg
    	{
    
    	
    	}
    	
    	
    #header
    	{
    
    
    	
    	}
    	
    
    
    
    	
    #navbar
    	{
    	border-width:20px;
    	width:-960px;
    	padding:15px 10px;
    	-moz-border-image: url("http://img.photobucket.com/albums/v134/Invadergir1612/navbar2.png") 0 14 0 14 stretch; /* Firefox */
    	-webkit-border-image: url("http://img.photobucket.com/albums/v134/Invadergir1612/navbar2.png") 0 14 0 14 stretch; /* Safari */
    	-o-border-image: url("http://img.photobucket.com/albums/v134/Invadergir1612/navbar2.png") 0 14 0 14 stretch; /* Opera */
    	border-image: url("http://img.photobucket.com/albums/v134/Invadergir1612/navbar2.png") 0 14 0 14 stretch;
    
    	}
    	
    	
    a:link 
    	{
    	color:#FFFFFF;
    	text-shadow: 1px 1px #000000;
    	text-decoration: none;
    	padding: 10px;
    	font-family:"Georgia";
    	font-style:italic;
    	font-size: 20px;
    	
    	}
    
    
    a:visited 
    	{
    	color:#FFFFFF;
    	}
    
    
    
    /*#carousel
    	{
    	position: absolute;
    	left: 350px;
    	top: 100px;
    	}
    */
    
    
    #carousel ul {
    	list-style: none;
    	width:1600px;
    	margin: 0;
    	padding: 0;
    	position:relative;
    }
    #carousel li {
    	display:inline;
    	float:left;
    }
    
    
    
    #content
    	{
    	background-color: white;
    	padding: 10px;
    	margin: 20px;
    	box-shadow: 5px 5px 5px #888888;
    	
    	
    	}
    	
    	
    
    	
    	
    
    #bottomcontent
    	{
    	
    	margin: auto;
    	
    	}
    	
    	
    	
    	
    #Facetwit
    	{
    	background-color: white;
    	padding-top: 10px;
    	margin: 20px;
    	margin-left: 300px;
    	width: 250px;
    	height: 150px;
    	box-shadow: 5px 5px 5px #888888;
    	float: left;
    	}
    	
    	
    #Facetwitbottom
    	{
    	background-color: #b8b8b8;
    	height: 58px;
    	Padding: 10px;
    	color: #000;
    	
    	}
    	
    	
    	
    	
    #Visit
    	{
    	background-color: white;
    	padding-top: 10px;
    	margin: 20px;
    	width: 250px;
    	height: 150px;
    	box-shadow: 5px 5px 5px #888888;
    	float: left;
    	
    	
    	}
    	
    	
    	
    	
    #Visitbottom
    	{
    	background-color: #b8b8b8;
    	height: 75px;
    	Padding: 10px;
    	color: #000;
    	
    	
    	}
    	
    #Visit a
    	{
    	font-size: 50px;
    	text-decoration: none;
    	color: #000000;
    	font-style: none;
    	
    	}
    	
    	
    #Contact
    	{
    	background-color: white;
    	padding-top: 10px;
    	margin: 20px;
    	width: 250px;
    	height: 150px;
    	box-shadow: 5px 5px 5px #888888;
    	float: left;
    	}
    	
    	
    	
    #contactbottom
    	{
    	background-color: #b8b8b8;
    	height: 80px;
    	Padding: 10px;
    	color: #000;
    	
    	
    	}
    	
    #Contact a
    	{
    	font-size: 45px;
    	text-decoration: none;
    	color: #000000;
    	font-style: none;
    	
    	}
    	
    
    #footer
    	{
    	background-color: white;
    	padding: 10px;
    	margin: 20px;
    	margin-top: 250px;
    	box-shadow: 5px 5px 5px #888888;
    	text-align: center
    	
    	}
    	
    Here is what it looks like now

    [​IMG]
     
  11. chrishirst

    chrishirst Well-Known Member Staff Member

    Messages:
    2,611
    heading elements <hn> are block elements so have an implied line break before and after the element.


    AND why are you using a HTML 5 DTD with HTML3.2 code (the <center> element) ?
     
  12. Lita

    Lita New Member

    Messages:
    31
    Ah that is good to know, I had no idea, so I will just change the name of the div then. and as for the <center> tags I just threw them in there when I started coding and I guess I just forgot about them. Thanks for pointing that out, Ill add the margin auto to the container now.
     
  13. chrishirst

    chrishirst Well-Known Member Staff Member

    Messages:
    2,611
    Knowing about inline and block elements and how they behave is fundamental, it IS HTML 101

    What will changing the name accomplish?
     
  14. Lita

    Lita New Member

    Messages:
    31
    Well I am new to all this and can forget somethings, im still learning and have a lot to learn.
     
  15. chrishirst

    chrishirst Well-Known Member Staff Member

    Messages:
    2,611
    Sure but you learn the basics on YOUR PROPERTIES NOT on paying clients documents.
     
  16. Lita

    Lita New Member

    Messages:
    31
    I am doing this site for free and it is for a friend. Its free so I can try and learn to do these things and get better with each site I make, I appreciate your help but there is no need to get snarky with me, I came here to get help not to be lectured.
     
  17. Phreaddee

    Phreaddee Super Moderator Staff Member

    Messages:
    1,978
    yes, learning about inline and block elements and how they behave is a good thing to know. however that's just as default with no styles attached to it.
    inline can be block and block can be inline. depends how creative you are with your css.
    float your image left
    float your h1 left
    give your image a bit of margin
    give both of them a width
    make sure image (width+margin+padding+border) + h1 (width+margin+padding+border) is equal to or smaller that the header that is containing them.
    adding positioning and display is not entirely needed but position:relative;float:left;display:inline on both will keep them happy and bug free in most browsers...
     
  18. Edge

    Edge Member

    Messages:
    461
    Also consider use of display:inline-block instead of floats - supported by IE7 and up.
     
  19. Phreaddee

    Phreaddee Super Moderator Staff Member

    Messages:
    1,978
    ...(thats why I use display:inline;)
    works down to ie6 and avoids the double margin bug.
    something inline-block alas doesnt AFAIK
     
  20. Phreaddee

    Phreaddee Super Moderator Staff Member

    Messages:
    1,978
    in fact i've never had a need to use inline-block in my life.
     

Share This Page