6 Replies - 511 Views - Last Post: 31 July 2014 - 08:32 AM

#1 ball4life  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 16
  • Joined: 09-May 13

How to make divs side by side?

Posted 31 July 2014 - 07:54 AM

Hi everyone, I'm trying to make the heading div and mailing list div in my code side by side and the navigation bar right underneath, but the mailing list div always ends up under the heading div.

What am I doing wrong in my code? Still a newbie in html/css/php. Thank you to anyone that helps.

This is my html:
<!doctype html>

<html>

<head>
<meta charset="utf-8">
<title>Andean American Associations</title>
<link href="main.css" rel="stylesheet" type="text/css">
<!--The following script tag downloads a font from the Adobe Edge Web Fonts server for use within the web page. We recommend that you do not modify it.-->
<script>var __adobewebfontsappname__="dreamweaver"</script>
<script src="http://use.edgefonts.net/source-sans-pro:n3:default.js" type="text/javascript"></script>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$("#slideshow1 > div:gt(0)").hide();

setInterval(function() { 
  $('#slideshow1 > div:first')
    .fadeOut(1000)
    .next()
    .fadeIn(1000)
    .end()
    .appendTo('#slideshow1');
},  3000);
</script>

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type='text/javascript'>
$(document).ready(function(){
$("img.d").hover(
function() {
$(this).stop().animate({opacity:1}, 500);

},
function() {
$(this).stop().animate({opacity:.5}, 500);
$(".item img").fadeIn(500);
this.src = grayscale(this.src);
});
 
});
</script>


</head>

<body background="latin_america Edit.jpg">

<div id="wrapper">

<header id="top">

<div id="heading"><h1>Andean American Associations</h1></div>


<div id = "mail">
<form name="contactform" method="post" action="send_form_email1.php">
<b>Join the Mailing List</b>
<table width="235">
<tr>
 <td width="40" valign="top">
  <label for="first_name">Name </label>
 </td>
 <td width="177" valign="top">
  <input  type="text" name="first_name" maxlength="50" size="25">
 </td>
</tr>

<tr>
 <td valign="top">
  <label for="email">Email</label>
 </td>
 <td valign="top">
  <input  type="text" name="email" maxlength="80" size="25">
 </td>
</tr>


<tr>
 <td colspan="2" style="text-align:right">
  <input type="submit" value="Submit">   
 </td>
</tr>
</table>
</form>
</div>

        <nav id="mainnav">
        <ul>
        	<li><a href="http://www.colombianamerican.org/" target="_blank"> Colombia</a></li>
            <li><a href="http://www.peruvian-american.org/" target="_blank"> Peruvian</a></li>
            <li><a href="http://ecuadoreanamericanassociation.org/" target="_blank"> Ecuadorean</a></li>
            <li><a href="http://www.venezuelanamerican.org/" target="_blank"> Venezuelan</a></li>
        </ul>
        </nav> 
		
</header>

&nbsp;

<table width="100%" border="0">
  <tr>
    <td>
		<div id="slideshow1">
			<div>
				<img src="Slideshow Colombia.jpg" height="100%" width="100%" alt=""/>
			</div>
			<div>
				<img src="Slideshow Peru.jpg" height="100%" width="100%" alt=""/>
			</div>
			<div>
				<img src="Slideshow Ecuador.jpg" height="100%" width="100%" alt=""/>
			</div>
		</div>
   </td>
   
    <td><p id="sidebar">The founder of the Chamber was Germán Olano, a Colombian businessman residing in New York who later became the Consul General of Colombia. The organizational meeting, held on April 27, 1927, at the Hotel Pennsylvania, was chaired by Phanor J. Eder, a partner of Hardin, Hess and Eder. Joseph Carter of R. W. Hebard & Co. acted as Secretary and Rafael del Castillo was elected President.</p></td>
  </tr>
</table>
      
    &nbsp;
	
    <footer id="foot">
	<div class="grow pic">
		<a href="http://www.colombianamerican.org/" target="_blank"> <img src="CAA.png" height="150" width="24%" alt=""/></a>
	</div>
	<div class="grow pic">
		<a href="http://www.peruvian-american.org/" target="_blank"><img src="EAA Text Bottom.jpg" height="150" width="24%" alt=""/></a>
	</div>
	<div class="grow pic">
		<a href="http://ecuadoreanamericanassociation.org/" target="_blank"><img src="PAA.png" height="150" width="24%" alt="" /></a>
	</div>
	<div class="grow pic">
		<a href="http://www.venezuelanamerican.org/" target="_blank"><img src="VAAUS.png" height="150" width="24%" alt=""/></a>
	</div>
	<!--
     <a href="http://www.colombianamerican.org/" target="_blank"> <img src="CAA.png" class='d' height="150" width="24%" alt=""/></a>&nbsp;&nbsp;
	 <a href="http://ecuadoreanamericanassociation.org/" target="_blank"><img src="PAA.png" class='d' height="150" width="24%" alt="" /></a>&nbsp;&nbsp;
     <a href="http://www.peruvian-american.org/" target="_blank"><img src="EAA Text Bottom.jpg" class='d' height="150" width="24%%" alt=""/></a>&nbsp;&nbsp;
     <a href="http://www.venezuelanamerican.org/" target="_blank"><img src="VAAUS.png" class='d' height="150" width="24%" alt=""/></a>
	 -->
  </footer>
</div>

    
</body>

</html>



And this is my css:

@charset "utf-8";

body{
	font-style: normal;
	font-weight: 400;
	font-family: source-sans-pro;
}

h1{
	padding-top: 2%;
	margin-left:1%;

}

#wrapper   {
	background-color: #E6E6FA;
	width: 100%;
	min-width: 740px;
	max-width:1010px;
	margin-left:180px;
	
}

#top {
width:100%;
}

#heading{
width:50%;
}

#mail{
	width: 40%;
	

}

form{
width: 40%;
}

#mainnav {
}

#mainnav ul{
	list-style-type: none;
	margin-left: 0px;
	padding-left: 0px;	
}

#mainnav a{
	width: 25%;
	display: block;
	float: left;
	text-align: center;
	background-color: #666666;
	color: #FFF;
	margin-left: 0px;
	padding-left: 0px;
	margin-right: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-top: 1.5%;
	margin-top: 0px;
	margin-bottom: 0px;
	height:30px;
}

td{
	width:50%;
}

a{
	font-weight: normal;
	text-decoration: none;
	transition: color 0.7s ease-in 0.3s;
	}
a:link{
	color:#FF6600;
	}
a:vistited{
	color:#FF944C;
	}
a:hover,a:active,a:focus
{
	color: #7F3300;
	text-decoration: underline;	
	}
#mainnav a:hover, #mainnav a:active, #mainnav a:focus, #mainnav a.thispage{
	text-decoration: none;	
	background-color: #333399; /*#43A6CB;*/
}

#sidebar{
	width: 80%;
	text-align: center;	
	margin-left: 10%;
}

#slideshow1 { 
    /*margin: 50px auto;*/ 
    position: relative;
    width: 85%; 
    height: 240px; 
    padding: 10px; 
    box-shadow: 0 0 20px rgba(0,0,0,0.4); 
	margin-left: 7%;
}

#slideshow1 > div { 
    position: absolute; 
    top: 10px; 
    left: 10px; 
    right: 10px; 
    bottom: 10px; 
}

#foot{
width:100%;
}


.grow img {
  height: 160px;
  width: 25%;
  display: inline-block;
  float: left;
 
  -webkit-transition: all 1s ease;
     -moz-transition: all 1s ease;
       -o-transition: all 1s ease;
      -ms-transition: all 1s ease;
          transition: all 1s ease;
}
 
.grow img:hover {
  width: 25%;
  height: 180px;
}



Is This A Good Question/Topic? 0
  • +

Replies To: How to make divs side by side?

#2 modi123_1  Icon User is online

  • Suitor #2
  • member icon



Reputation: 9286
  • View blog
  • Posts: 34,804
  • Joined: 12-June 08

Re: How to make divs side by side?

Posted 31 July 2014 - 07:56 AM

Is everything assigned a 'float'?
Was This Post Helpful? 0
  • +
  • -

#3 laytonsdad  Icon User is online

  • Cheese and Sprinkles
  • member icon

Reputation: 441
  • View blog
  • Posts: 1,868
  • Joined: 30-April 10

Re: How to make divs side by side?

Posted 31 July 2014 - 07:58 AM

Have you tried to use display:inline-block

Quote

Displays an element as an inline-level block container. The inside of this block is formatted as block-level box, and the element itself is formatted as an inline-level box

Was This Post Helpful? 0
  • +
  • -

#4 ball4life  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 16
  • Joined: 09-May 13

Re: How to make divs side by side?

Posted 31 July 2014 - 08:05 AM

View Postlaytonsdad, on 31 July 2014 - 07:58 AM, said:

Have you tried to use display:inline-block

Quote

Displays an element as an inline-level block container. The inside of this block is formatted as block-level box, and the element itself is formatted as an inline-level box


Yes I've tried that already, I put that in my css under the #heading tag. The output seems to be the same.

View Postmodi123_1, on 31 July 2014 - 07:56 AM, said:

Is everything assigned a 'float'?


I've tried using float, but it ends up putting the navigation bar and the mail div side by side instead of with the heading.
Was This Post Helpful? 0
  • +
  • -

#5 andrewsw  Icon User is online

  • Fire giant boob nipple gun!
  • member icon

Reputation: 3519
  • View blog
  • Posts: 12,019
  • Joined: 12-December 12

Re: How to make divs side by side?

Posted 31 July 2014 - 08:09 AM

You need to use display: inline-block on both divs:
#heading {
    width:50%;
    display: inline-block;
}
#mail {
    width: 40%;
    display: inline-block;
}

If either one is left as their default, which is 'block' for a div, it won't sit inline with the other.

Floating also works.

This post has been edited by andrewsw: 31 July 2014 - 08:12 AM

Was This Post Helpful? 1
  • +
  • -

#6 DarenR  Icon User is offline

  • D.I.C Lover

Reputation: 469
  • View blog
  • Posts: 3,199
  • Joined: 12-January 10

Re: How to make divs side by side?

Posted 31 July 2014 - 08:09 AM

i like to make a div with horizontal direction a repeat the times i want columns ----- and in there i place div's as place holders for the columns and make them parents to div's i want in said columns
Was This Post Helpful? 0
  • +
  • -

#7 ball4life  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 16
  • Joined: 09-May 13

Re: How to make divs side by side?

Posted 31 July 2014 - 08:32 AM

View Postandrewsw, on 31 July 2014 - 08:09 AM, said:

You need to use display: inline-block on both divs:
#heading {
    width:50%;
    display: inline-block;
}
#mail {
    width: 40%;
    display: inline-block;
}

If either one is left as their default, which is 'block' for a div, it won't sit inline with the other.

Floating also works.


Thank you so much! That fixed the problem, I didn't know you had to put it twice.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1