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.
Page 1 of 2 12 LastLast
Results 1 to 15 of 18
  1. #1
    New Coder
    Join Date
    May 2008
    Posts
    14
    Thanks
    0
    Thanked 0 Times in 0 Posts

    align 5 div tags horizontaly containing images

    Hi
    I am trying to align 5 images horizontaly with no border so they blend, the five images total 900px but are differnet sizes, i do not want to use a table and i am trying to do it with divs/css. here is the code so far, thank you for your time.
    Code:
       html    <div class"guidewrap">
          <div class"guide1"><img src="img/hrsr1.jpg" alt="" /></div>
          <div class"guide1"><img src="img/hrsr2.jpg" alt="" /></div>
          <div class"guide1"><img src="img/hrsr3.jpg" alt="" /></div>
          <div class"guide1"><img src="img/hrsr4.jpg" alt="" /></div>
          <div class"guide1"><img src="img/hrsr5.jpg" alt="" /></div>
          </div>
    css : 
    .guidewrap {width: 900px; height: 150px; margin:auto;position: relative;display:inline;}
    .guide1 {margin: 0px;height: auto;width: auto;float: left;}

  • #2
    Regular Coder
    Join Date
    May 2009
    Posts
    813
    Thanks
    123
    Thanked 24 Times in 24 Posts
    Add padding:0; to your inner divs. See if that helps. add padding: 0; to your wrap too.
    Last edited by quartzy; 02-14-2011 at 11:50 PM.

  • #3
    New Coder
    Join Date
    May 2008
    Posts
    14
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by quartzy View Post
    Add padding:0; to your inner divs. See if that helps. add padding: 0; to your wrap too.
    no change they all are still vertical.

  • #4
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,777
    Thanks
    6
    Thanked 1,021 Times in 994 Posts
    There’s gotta be something else wrong. Please post your entire code.

  • #5
    New Coder
    Join Date
    May 2008
    Posts
    14
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by VIPStephan View Post
    There’s gotta be something else wrong. Please post your entire code.
    That is the entire code and this is the outcome instead of an inline alignment.
    Attached Thumbnails Attached Thumbnails align 5 div tags horizontaly containing images-imagne1.jpg  

  • #6
    Regular Coder
    Join Date
    May 2009
    Posts
    813
    Thanks
    123
    Thanked 24 Times in 24 Posts
    You need to give each of your inner divs a width for a start, and that is not your code it is a screenshot

  • #7
    New Coder
    Join Date
    May 2008
    Posts
    14
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by quartzy View Post
    You need to give each of your inner divs a width for a start, and that is not your code it is a screenshot
    I did post the code at the top of the page, but it has now changed to this, but still does not work :

    Code:
     html = 
          <div class"guidewrap">
          <div class"guide1"><img src="img/hrsr1.jpg" alt="" /></div>
          <div class"guide2"><img src="img/hrsr2.jpg" alt="" /></div>
          <div class"guide3"><img src="img/hrsr3.jpg" alt="" /></div>
          <div class"guide4"><img src="img/hrsr4.jpg" alt="" /></div>
          <div class"guide5"><img src="img/hrsr5.jpg" alt="" /></div>
          </div>
    css= 
    .guidewrap {width: 900px; height: 150px; margin:auto; position: relative;display:inline; padding: 0;}
    .guide1 {position:relative; float: left; width: 202px;}
    .guide2 {position:relative; float:left; width: 167px;}
    .guide3 {position:relative; float: left; width: 167px;}
    .guide4 {position:relative; float: left; width: 167px;}
    .guide5 {position:relative; float: left; width: 197px;}
    Last edited by quibbles; 02-15-2011 at 12:52 AM.

  • #8
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,777
    Thanks
    6
    Thanked 1,021 Times in 994 Posts
    I was asking for your entire code! This can’t be all the code you have in your file(s), can it? Please, post all the code you’ve written for this task. Everything!

  • #9
    New Coder
    Join Date
    May 2008
    Posts
    14
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by VIPStephan View Post
    I was asking for your entire code! This can’t be all the code you have in your file(s), can it? Please, post all the code you’ve written for this task. Everything!
    It's ok i have almost solved it by changing the code above to this within the html page just have a gap now between the last 2 images which are hrs4 and 5:

    Code:
              <div style="width: 900px;">
            <div style="float: left; background: #FF0000; width: 202px; max-height:150px;">
                <img src="img/hrsr1.jpg" alt="" /></div>
            <div style="float: right; background: #00FF00; width: 167px;max-height:150px;">
                <img src="img/hrsr5.jpg" alt="" /></div>
             <div style="float: right; width: 197px;background: #00FF00;max-height:150px;">
                <img src="img/hrsr4.jpg" alt="" /></div>
                <div style="float: left; background: #00FF00; width: 167px;max-height:150px;">
                <img src="img/hrsr2.jpg" alt="" /></div>
                <div style="float: left; background: #00FF00; width: 167px;max-height:150px;">
                <img src="img/hrsr3.jpg" alt="" /></div>   
            <div style="clear: both;">
            </div>

  • #10
    Regular Coder
    Join Date
    May 2009
    Posts
    813
    Thanks
    123
    Thanked 24 Times in 24 Posts
    Glad to see you realised your divs were expaning out of the wrap. If there is a gap then the images are not the correct size to the div width I reckon.

  • #11
    New Coder
    Join Date
    May 2008
    Posts
    14
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Unhappy

    Quote Originally Posted by quartzy View Post
    Glad to see you realised your divs were expaning out of the wrap. If there is a gap then the images are not the correct size to the div width I reckon.
    The div wrap is 900px all the images total 900px the outer container is 900px there are no borders but that last images has about a 30px gap.

  • #12
    Regular Coder
    Join Date
    May 2009
    Posts
    813
    Thanks
    123
    Thanked 24 Times in 24 Posts
    The width was expanding the images, but you have now fixed it.

    It is hard to see your problem with little code, but did you add margin: 0; padding: 0; to all your inner divs.

  • #13
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,777
    Thanks
    6
    Thanked 1,021 Times in 994 Posts
    Yo! We could have saved the last twelve replies if you would just have given us your entire source code rather than jerking around and wasting our time! The solution of your problem is basically a no-brainer but we’re not psychic and it cannot be solved if you keep being incooperative!

    Edit: This is all you need to get five divs floating next to each other:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    	<head>
    		<title></title>
    		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    		<meta name="description" content="" />
    		<meta name="keywords" content="" />
    		<style type="text/css">
    		#container {
    			width: 900px;
    			margin: auto;
    			height: 150px;
    		}
    		.whatever {
    			float: left;
    			width: 167px;
    			height: 150px;
    			background: green;
    		}
    		</style>
    	</head>
    	<body>
    		<div id="container">
    			<div class="whatever">…</div>
    			<div class="whatever">…</div>
    			<div class="whatever">…</div>
    			<div class="whatever">…</div>
    			<div class="whatever">…</div>
    		</div>
    	</body>
    </html>
    And this is what I mean by entire source code.
    Last edited by VIPStephan; 02-15-2011 at 01:59 AM.

  • #14
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by VIPStephan View Post
    Yo! We could have saved the last twelve replies if you would just have given us your entire source code

    Sometimes getting people to provide enough information for someone to give an informed response/solution is like pulling teeth. I don't know why...
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #15
    New Coder
    Join Date
    May 2008
    Posts
    14
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by VIPStephan View Post
    Yo! We could have saved the last twelve replies if you would just have given us your entire source code rather than jerking around and wasting our time! The solution of your problem is basically a no-brainer but we’re not psychic and it cannot be solved if you keep being incooperative!

    Edit: This is all you need to get five divs floating next to each other:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    	<head>
    		<title></title>
    		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    		<meta name="description" content="" />
    		<meta name="keywords" content="" />
    		<style type="text/css">
    		#container {
    			width: 900px;
    			margin: auto;
    			height: 150px;
    		}
    		.whatever {
    			float: left;
    			width: 167px;
    			height: 150px;
    			background: green;
    		}
    		</style>
    	</head>
    	<body>
    		<div id="container">
    			<div class="whatever">…</div>
    			<div class="whatever">…</div>
    			<div class="whatever">…</div>
    			<div class="whatever">…</div>
    			<div class="whatever">…</div>
    		</div>
    	</body>
    </html>
    And this is what I mean by entire source code.
    Hi sorry to be such a pain to you stephen, I just could not see why pasting code that controls other elements other than the present issue was relevant, the code I pasted was what i wrote for this task alone and is almost identical to what you have just pasted but does not work which is why i now have just used this code which works. [code] <div style="width:900px;">
    <div style="float: left; background: #FF0000; width:202px; max-height:150px;margin: 0; padding: 0">
    <img src="img/hrsr1.jpg"border="0" alt="" /></div>
    <div style="float: right; background: #000000; width:197px;max-height:150px;margin: 0; padding: 0">
    <img src="img/hrsr5.jpg"border="0px" alt="" /></div>
    <div style="float: right; background: #ffffff; width:167px;max-height:150px;margin: 0; padding: 0">
    <img src="img/hrsr4.jpg" border="0"alt="" /></div>
    <div style="float: left; background: #00FF00; width:167px;max-height:150px;margin: 0; padding: 0">
    <img src="img/hrsr2.jpg"border="0" alt="" /></div>
    <div style="float: left; background: #00FF00; width:167px;max-height:150px;margin: 0; padding: 0">
    <img src="img/hrsr3.jpg"border="0" alt="" /></div>
    <div style="clear: both;">
    </div>
    code]

    thank you all for your time.


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

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