Solved

How can I get this table to diplay inline with my other divs?

Posted on 2015-02-17
9
70 Views
Last Modified: 2015-02-17
Here's my code:

<div class="content">

	<div style="height:370px; width:590px; background-color:#cccccc; display:inline-block; text-align:center; d"><span>this is perfect</span></div>
	<div style="width:11px; height:5px; background-color:#898989; display:inline-block; text-align:center;"></div>
	<div style="height:370px; width:590px; background-color:#b4b4b4; display:inline-block; text-align:center;"><span>graph #2</span></div>
	<div style="width:1200px; height:500px; background-color:#000000; color:#ffffff; margin-top:15px; text-align:center;"><span>graph #3</span></div>
	<div style="height:370px; width:590px; background-color:#cccccc; display:inline-block; text-align:center; margin-top:10px;"><span>graph #4</span></div>
	<div style="width:11px; height:5px; background-color:#898989; display:inline-block; text-align:center;"></div>
	<div style="height:370px; width:590px; background-color:#cccccc; display:inline-block; text-align:center; margin-top:10px;"><span>graph #5</span></div>
	<div style="height:370px; width:590px; background-color:#cccccc; display:inline-block; text-align:center; margin-top:10px;"><span>graph #6</span></div>
	<div style="width:11px; height:5px; background-color:#898989; display:inline-block; text-align:center;"></div>
	<div style="height:370px; width:590px; background-color:#cccccc; display:inline-block; text-align:center; margin-top:10px;"><span>graph #7</span></div>
</div>

Open in new window


...and here's what it looks like:

screenshot
Now, if I attempt to add a table within the div that says, "this is perfect," look what happens:

another screenshot
I've got all my divs happening exactly as I wanted them having no idea that adding a table into the mix would mess things up. What do I need to change so I can place a table within a div and have the architecture of my site not blow up?

Thanks!
0
Comment
Question by:brucegust
  • 4
  • 3
  • 2
9 Comments
 
LVL 11

Expert Comment

by:N R
ID: 40615153
Can you link me to the live site so I can see the code?
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 40615225
The short answer is don't use a table.  They do not obey the normal layout rules.  Without knowing what the table is being used for, it is impossible to knw if it is a correct use.  If the table is the correct element to be using then you have to start developing the layout from the table and adjust the other elements to the table, because if you try and stick the table into a layout it will not drop in without a problem most of the time.

Cd&
0
 

Author Comment

by:brucegust
ID: 40615256
Nathan, here's the code. It's an intranet site so it's not "live," but the only things that you would be missing would be the header and footer images, which aren't crucial.

Here's my html:

<!DOCTYPE html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>CSS Layout Test</title>
<link href="css/stylesheet.css" rel="stylesheet" type="text/css" />
<link href="css/blitzer/jquery-ui-1.10.4.custom.css" rel="stylesheet">
<script type="text/javascript" src="js/jquery-1.7.1.min.js" ></script>
<script type="text/javascript" src="js/highcharts.js"></script>
<script type="text/javascript" src="js/grouped-categories.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 
<script type="text/javascript"> 
$(document).ready(function() {
	//Tooltips
	$(".tip_trigger").hover(function(){
		tip = $(this).find('.tip');
		tip.show(); //Show tooltip
	}, function() {
		tip.hide(); //Hide tooltip		  
	}).mousemove(function(e) {
		var mousex = e.pageX + 5; //Get X coodrinates
		var mousey = e.pageY + 5; //Get Y coordinates
		var tipWidth = tip.width(); //Find width of tooltip
		var tipHeight = tip.height(); //Find height of tooltip
		
		//Distance of element from the right edge of viewport
		var tipVisX = $(window).width() - (mousex + tipWidth);
		//Distance of element from the bottom of viewport
		var tipVisY = $(window).height() - (mousey + tipHeight);
		  
		if ( tipVisX < 5 ) { //If tooltip exceeds the X coordinate of viewport
			mousex = e.pageX - tipWidth - 5;
		} if ( tipVisY < 5 ) { //If tooltip exceeds the Y coordinate of viewport
			mousey = e.pageY - tipHeight - 5;
		} 
		tip.css({  top: mousey + 10px, left: mousex + 10px });
	});
});
</script>
</head>

<body>



<div class="nav_bar">
	<div class="navcontainer">
		<ul>
		<li><a href="index.php" class="home"></a></li>
		<li><a href="#" class="regions"></a>
			<ul>
			<table class="regions" width="900">
				<tr>
					<td class="regions_header">Carolina / Tennessee</td>
					<td class="regions_header">Florida</td>
					<td class="regions_header">Georgia / Alabama</td>
					<td class="regions_header">Houston Gulf Coast</td>
					<td class="regions_header">South Central</td>
					<td class="regions_header">Central Texas</td>
				</tr>
				<tr>
					<td>
						<table class="regions_list">
							<tr>
								<td class="regions_list"><a href="http://vzwcarolinastennessee.com/" target="_blank" class="nav_menu_td">region news</a></td>
							</tr>
						</table>
					</td>
					<td>
						<table class="regions_list">
							<tr>
								<td class="regions_list"><a href="http://www.vzwflorida.com" target="_blank" class="nav_menu_td">region news</a></td>
							</tr>
						</table>
					</td>
					<td>
						<table class="regions_list">
							<tr>
								<td class="regions_list"><a href="http://www.vzwgeorgiaalabama.com" target="_blank" class="nav_menu_td">region news</a></td>
							</tr>
						</table>
					</td>
					<td>
						<table class="regions_list">
							<tr>
								<td class="regions_list"><a href="http://www.vzwhoustongulfcoast.com" target="_blank" class="nav_menu_td">region news</a></td>
							</tr>
						</table>
					</td>
					<td>
						<table class="regions_list">
							<tr>
								<td class="regions_list"><a href="http://www.vzwsouthcentral.com" target="_blank" class="nav_menu_td">region news</a></td>
							</tr>
						</table>
					</td>
					<td>
						<table class="regions_list">
							<tr>
								<td class="regions_list"><a href="http://www.vzwcentraltexas.com" target="_blank" class="nav_menu_td">region news</a></td>
							</tr>
						</table>
					</td>
				</tr>
			</table>					
			</ul>					
		</li>
		<li><a href="planning.php" class="planning"></a>
			<ul>
			<table class="regions" width="700">
				<tr>
					<td class="regions_header"><a href="" class="nav_menu_th">RF Planning</a></td>
					<td class="regions_header"><a href="" class="nav_menu_th">Data Planning</td>
					<td class="regions_header">Network Implementation</td>
					<td class="regions_header">Power and Ground</td>
					<td class="regions_header">Transport</td>
				</tr>
				<tr>
					<td>
						&nbsp;
					</td>
					<td>
					&nbsp;
					</td>
					<td>
						<table class="regions_list">
							<tr>
								<td class="regions_list"><a href="" class="nav_menu_td">Current Projects Update</a></td>
							</tr>
						</table>
					</td>
					<td>
						<table class="regions_list">
							<tr>
								<td class="regions_list"><a href="" class="nav_menu_td">Team Website</a></td>
							</tr>
						</table>
					</td>
					<td>
						<table class="regions_list">
							<tr>
								<td class="regions_list"><a href="http://soareatransportreporting.south.vzwcorp.com/Default.aspx" class="nav_menu_td" target="_blank">Area Reports</a></td>
							</tr>
						</table>
					</td>
				</tr>
			</table>					
			</ul>	
		</li>
		<li><a href="budget_reports.php" class="budget"></a>
			<ul style="margin-left:-300px;">
			<table class="regions">
				<tr>
					<td class="regions_header">Tools & Reporting</td>
					<td class="regions_header">Financial Planning & Analysis</td>
					<td class="regions_header" style="width:100px;">Inventory</th>
					<td class="regions_header">Real Estate</td>
					<td class="regions_header">Compliance</td>
					<td class="regions_header">Code Administration</td>
				</tr>
				<tr>
					<td>
						<table class="regions_list">
							<tr>
								<td class="regions_list"><a href="" class="nav_menu_td">Current Development Project List</a></td>
							</tr>
							<tr>
								<td class="regions_list"><a href="http://southareanetwork.nss.vzwnet.com/project_request.php" class="nav_menu_td">New Development Project Request</a></td>
							</tr>
							<tr>
								<td class="regions_list"><a href="" class="nav_menu_td">NSS Application Summary</a></td>
							</tr>
							<tr>
								<td class="regions_list"><a href="https://portal.vh.vzwnet.com/aeportal/" class="nav_menu_td" target="_blank">NSS Portal</a></td>
							</tr>
							<tr>
								<td class="regions_list"><a href="http://stakeholder.south.vzwcorp.com/" class="nav_menu_td">360 Survey Tool</a></td>
							</tr>
						</table>
					</td>
					<td>
						<table class="regions_list">
								<tr>
								<td class="regions_list"><a href="http://budgettools.south.vzwcorp.com/default.aspx?aid=1&bpid=" class="nav_menu_td" target="_blank">Capital Budget Tool</a></td>
							</tr>
							<tr>
								<td class="regions_list"><a href="http://expensebudgettool.south.vzwcorp.com/default.aspx" class="nav_menu_td" target="_blank">Expense Budget Tool</a></td>
							</tr>
							<tr>
								<td class="regions_list"><a href="http://netadmin.nss.vzwnet.com/asset-management/cip-dashboard/" target="_blank" class="nav_menu_td">CIP Dashboard</a></td>
							</tr>
						</table>
					</td>
					<td>
						<table class="regions_list">
							<tr>
								<td class="regions_list" style="width:100px;"><a href="http://txslsaiapw1v.nss.vzwnet.com/" class="nav_menu_td" target="_blank">Inventory Tool</a></td>
							</tr>
						</table>
					</td>
					<td>
						<table class="regions_list">
							<tr>
								<td class="regions_list" style="width:100px;"><a href="http://sarrealestatetracker.south.vzwcorp.com/Default.aspx" class="nav_menu_td" target="_blank">Real Estate Tracker</a></td>
							</tr>
						</table>
					</td>
					<td>
						<table class="regions_list">
							<tr>
								<td class="regions_list"><a href="http://10.215.213.203/c2/vzwcompreg/content.nsf/lookup.htmlpages/mainframe.html?open" class="nav_menu_td" target="_blank">Network Compliance and Regulatory</a></td>
							</tr>
						</table>
					</td>
					<td>
						<table class="regions_list">
							<tr>
								<td class="regions_list"><a href="" class="nav_menu_td">Team Members</a></td>
							</tr>
							<tr>
								<td class="regions_list"><a href="" class="nav_menu_td">File Library</a></td>
							</tr>
							<tr>
								<td class="regions_list"><a href="http://txslcarxpa1v.nss.vzwnet.com/CARRIE/eng/Lerg/index.cfm" class="nav_menu_td" target="_blank">CARRIE</a></td>
							</tr>
						</table>
					</td>
				</tr>
			</table>					
			</ul>	
		</li>
		<li><a href="" class="system_perf"></a>
			<ul class="tool_list">
				<table class="regions" width="150">
					<tr>
						<td class="regions_header"><a href="http://sasysperf/index.php" target="_blank" class="nav_menu_th">Area System Performance</td>
					</tr>
					<tr>
						<td>
							<table class="regions_list">
								<tr>
									<td class="regions_list"><a href=""class="nav_menu_td">Reporting Website</a></td>
								</tr>
								<tr>
									<td class="regions_list"><a href="http://saportal.south.vzwcorp.com/LTEOffload/Index"class="nav_menu_td" target="_blank">LTE Offload Tool</a></td>
								</tr>
								<tr>
									<td class="regions_list"><a href="https://cloudsites.vzbi.com/sites/SAMonthlyReporting/_layouts/15/start.aspx#/SitePages/Home.aspx "class="nav_menu_td" target="_blank">Monthly Reporting Sharepoint</a></td>
								</tr>
							</table>
						</td>
					</tr>
					<tr>
				</table>
			</ul>
		</li>
		<li><a href="network_ops.php" class="network_ops"></a>
			<ul class="tool_list">
				<table class="regions" width="200">
					<tr>
						<td class="regions_header">Network Operations</td>
					</tr>
					<tr>
						<td>
							<table class="regions_list">
								<tr>
									<td class="regions_list"><a href="http://txsltwp1v.nss.vzwnet.com/translations/" class="nav_menu_td" target="_blank">Translations Website</a></td>
								</tr>
							</table>
						</td>
					</tr>
				</table>
			</ul>
		</li>
		<li><a href="reference.php" class="reference"></a>
			<ul class="tool_list">
				<table class="regions" width="150">
					<tr>
						<td class="regions_header">Organization</td>
						<td class="regions_header">Systems</td>
					</tr>
					<tr>
						<td>
							<table class="regions_list">
								<tr>
									<td class="regions_list"><a href="faq_list.php" class="nav_menu_td">FAQs</a></td>
								</tr>
								<tr>
									<td class="regions_list"><a href="" class="nav_menu_td">Acronymns</a></td>
								</tr>
							</table>
						</td>
						<td>
							<table class="regions_list">
								<tr>
									<td class="regions_list"><a href=""class="nav_menu_td">File Library</a></td>
								</tr>
							</table>
						</td>
					</tr>
				</table>
			</ul>	
		</li>
		<li><a href="exec_reports.php" class="reports"></a>
			<ul class="tool_list">
				<table class="regions">
					<tr>
						<td class="regions_header">Finanical Planning and Analysis</td>
					</tr>
					<tr>
						<td>
							<table class="regions_list">
								<tr>
									<td><a herf="http://netadmin.nss.vzwnet.com/asset-management/cip-dashboard/" target="_blank" class="nav_menu_id">CIP Dashboard</a></td>
								</tr>
							</table>
						</td>
					</tr>
				</table>
			</ul>
		</li>
		</ul>
	</div>
</div>
<div style="position:absolute; z-index:20;">
<a class="tip_trigger" href="">
<IMG SRC="images/thumbs_up.png" border="0">
	<span class="tip">
	This application comes to you courtesy of Nelson DelValle.
	</span>
</a>
</div>
<div class="content">
	<div style="height:370px; width:590px; background-color:#cccccc; display:inline-block; text-align:center; d"><span><table border="1"><tr><td>hello</td></tr></table></span></div>
	<div style="width:11px; height:5px; background-color:#898989; display:inline-block; text-align:center;"></div>
	<div style="height:370px; width:590px; background-color:#b4b4b4; display:inline-block; text-align:center;"><span>graph #2</span></div>
	<div style="width:1200px; height:500px; background-color:#000000; color:#ffffff; margin-top:15px; text-align:center;"><span>graph #3</span></div>
	<div style="height:370px; width:590px; background-color:#cccccc; display:inline-block; text-align:center; margin-top:10px;"><span>graph #4</span></div>
	<div style="width:11px; height:5px; background-color:#898989; display:inline-block; text-align:center;"></div>
	<div style="height:370px; width:590px; background-color:#cccccc; display:inline-block; text-align:center; margin-top:10px;"><span>graph #5</span></div>
	<div style="height:370px; width:590px; background-color:#cccccc; display:inline-block; text-align:center; margin-top:10px;"><span>graph #6</span></div>
	<div style="width:11px; height:5px; background-color:#898989; display:inline-block; text-align:center;"></div>
	<div style="height:370px; width:590px; background-color:#cccccc; display:inline-block; text-align:center; margin-top:10px;"><span>graph #7</span></div>
</div>

<div class="footer"><br>&copy; Verizon Wireless | South Area | All Rights Reserved | <a href="http://southareanetwork.nss.vzwnet.com/contact.php" style="color:#ffffff; text-decoration:none;">Contact</a></div></body></html>

Open in new window


and here's my CSS:

html { 
  height: 100%;
}

body {
margin:0;
font-family: Helvetica, Microsoft Sans Serif;
font-size: 11pt;
height:100%;
width:100%;
}

.nav_bar {
position:relative;
margin-top:0px;
background-image:url(../../images/nav_bar_background.png);
height:29px;
width:100%;
min-width:1300px;
background-repeat:repeat-x;
z-index:5;
}

.navcontainer {
margin:auto;
width:1300px;
height:29px;
position:relative;
z-index:6;
}

.navcontainer ul {
position: absolute;
padding:0;
margin: 0px;
list-style-type:none;

}

/*here's my list characteristics as far how things are displayed and how they're "floated" */
.navcontainer ul li {
position: relative;
display: block;
float: left;
margin-left:35px;
z-index:10;
}

.navcontainer ul li a {
text-decoration: none;
display: block;
padding-right: 0px;
}

/* this command tells my li's within the first tier of ul's to bust out with a pulldown menu */
.navcontainer ul li:hover > ul 
{
display: block;
}

/* now we're getting jiggy with it by establishing the rules for the actual pulldown menu */
.navcontainer ul ul {
display: none;
background: none;
margin-top: 0px;
padding-top: 0;
position: absolute;
background: rgba(204,204,204, .7);
border-style:solid;
border-width: thin;
border-color:#cccccc;
line-height:35px;
height:auto;
z-index:100;
border-radius:6px;
-moz-border-radius:6px;
}

.navcontainer ul ul li {
float:none;
margin:0px;
padding:0;
}

.navcontainer ul ul li a {
display: block;
float:none;
margin: 0 0 0 10px;
padding: 0;
font-family: Helvetica, Microsoft Sans Serif;
font-size: 18px;
padding-left:0px;
z-index:10;
}	

.navcontainer ul ul li:hover > ul 
{
display: block;
}

.navcontainer ul ul li:hover {
display:block;
}

.navcontainer:after {
	content: ".";
	display: block;
	clear: both;
	visibility: hidden;
	line-height: 0;
	height: 0;
}

a.home {
display:inline-block; /**** important ****/
margin-top:5px;
width:39px;
height:12px;
background-image:url(../../images/button_home.png);
background-repeat:no-repeat;
}

a.regions {
display:inline-block; /**** important ****/
margin-top:5px;
margin-left:25px;
width:51px;
height:29px;
background-image:url(../../images/button_regions.png);
background-repeat:no-repeat;
}

a.planning {
display:inline-block; /**** important ****/
margin-top:5px;
margin-left:25px;
width:58px;
height:29px;
background-image:url(../../images/button_planning.png);
background-repeat:no-repeat;
}

a.budget {
display:inline-block;
margin-top:5px;
margin-left:25px;
width:189px;
height:29px;
background-image:url(../../images/button_budget.png);
background-repeat:no-repeat;
}

a.system_perf {
display:inline-block; /**** important ****/
margin-top:5px;
margin-left:25px;
width:150px;
height:29px;
background-image:url(../../images/button_system_perf.png);
background-repeat:no-repeat;
}

a.network_ops {
display:inline-block; /**** important ****/
margin-top:5px;
margin-left:25px;
width:132px;
height:29px;
background-image:url(../../images/button_network_ops.png);
background-repeat:no-repeat;
}

a.reference {
display:inline-block; /**** important ****/
margin-top:5px;
margin-left:25px;
width:66px;
height:29px;
background-image:url(../../images/button_reference.png);
background-repeat:no-repeat;
}

a.reports {
display:inline-block; /**** important ****/
margin-top:5px;
margin-left:25px;
width:120px;
height:29px;
background-image:url(../../images/button_reports.png);
background-repeat:no-repeat;
}

a.footer_link {
color:white;
text-decoration:none;
}

table.csv_sample {
 box-shadow: 7px 7px 15px #e9e9e9;
 border-collapse:separate;
border-radius:6px;
-moz-border-radius:6px;
 margin:auto;
 width:auto;
border: 1px solid #d7d4d4;
 }
 
 table.page_display {
 box-shadow: 7px 7px 15px #e9e9e9;
 border-collapse:separate;
border-radius:6px;
-moz-border-radius:6px;
 margin:auto;
 width:650px;
border: 1px solid #d7d4d4;
 }
 
 td.csv_sample {
padding:5px;
border: 1px solid grey;
 text-align:center;
 background-color:#cccccc;
 }
 
  td.csv_sample_black {
padding:5px;
border: 1px solid grey;
 text-align:center;
 background-color:#000000;
 color:#ffffff;
 font-weight:bold;
 }
 
 td.csv_sample_cell {
padding:5px;
border-collapse: collapse;
border: 1px solid grey;
 }
 
 td.title {
 text-align:right;
 }
 
 table.regions {
border:none;
 margin:auto;
 }
 
 table.regions th {
 border: 1px solid #ffffff;
 background-color:#282828;
 height:20px;
 line-height:20px;
 text-align:center;
 font-weight:normal;
 color:#ffffff;
 width:auto;
 }
 
  table.regions td.regions_header {
 border: 1px solid #ffffff;
 background-color:#282828;
 height:20px;
 line-height:20px;
 text-align:center;
 font-weight:normal;
 color:#ffffff;
 white-space:nowrap;
 }
 
 
 table.regions td {
 line-height:20px;
 text-align:center;
 vertical-align:top;
 width:300px;
 height:20px;
 white-space:nowrap;
 }
 
 table.regions_list {
 border-radius:6px;
-moz-border-radius:6px;
background-color:#ffffff;
 border: 1px solid #cccccc;
 }
 
 table.regions_list td {
 text-align:left;
 line-height:20px;
 height:20px;
 }
 
 a.nav_menu_th {
text-decoration:none;
color:#ffffff;
}
a.nav_menu_th:hover {
text-decoration:underline;
color:#ffffff;
}

a.nav_menu_th:visited {
text-decoration:none;
color:#ffffff;
}

a.nav_menu_td {
text-decoration:none;
color:#000000;
}
a.nav_menu_td:hover {
text-decoration:underline;
color:#000000;
}

a.nav_menu_td:visited {
text-decoration:none;
color:#000000;
}

.footer {
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: 30px;
background-image:url(../../images/footer.jpg);
background-repeat:repeat-x;
font-size:9pt;
color:#ffffff;
text-align:center;
}

a.footer_link {
color:white;
text-decoration:none;
}

.content {
 width:1200px;
 margin:auto;
 margin-top:25px;
 margin-bottom:35px;
 height:100%;
 background-color:#454545;

}

span {
position: relative;
top: 50%;
transform: translateY(-50%);
}


.tip {
background-color:#ffffff;
filter:alpha(opacity=95);
display:none; /*--Hides by default--*/
padding:10px;
position:absolute;    
z-index:1000;
text-decoration: none;
background-color:#ffffff; 
border: 1px solid #cccccc;
color:#000000;
box-shadow: 7px 7px 15px #e9e9e9;
border-radius:6px;
-moz-border-radius:6px;
margin:auto;
width:300px;
height:45px;
border: 1px solid #d7d4d4;
}

Open in new window


I appreciate your help!

And CD&, I get it, but in this instance, it's not my code and the table is regurgitating some database driven stuff, so I really want to try to figure out a way to make this work before I punt and have to start all over.
0
Networking for the Cloud Era

Join Microsoft and Riverbed for a discussion and demonstration of enhancements to SteelConnect:
-One-click orchestration and cloud connectivity in Azure environments
-Tight integration of SD-WAN and WAN optimization capabilities
-Scalability and resiliency equal to a data center

 
LVL 11

Accepted Solution

by:
N R earned 500 total points
ID: 40615282
Are you wanting to pull the grey boxes back together like this?

http://gallitin.com/eetest.php

If so you can change your current code (notice float left on the first div):
<div class="content">
	<div style="height:370px; width:590px; background-color:#cccccc; display:inline-block; text-align:center;"><span><table border="1"><tr><td>hello</td></tr></table></span></div>
	<div style="width:11px; height:5px; background-color:#898989; display:inline-block; text-align:center;"></div>
	<div style="height:370px; width:590px; background-color:#b4b4b4; display:inline-block; text-align:center;"><span>graph #2</span></div>
	<div style="width:1200px; height:500px; background-color:#000000; color:#ffffff; margin-top:15px; text-align:center;"><span>graph #3</span></div>
	<div style="height:370px; width:590px; background-color:#cccccc; display:inline-block; text-align:center; margin-top:10px;"><span>graph #4</span></div>
	<div style="width:11px; height:5px; background-color:#898989; display:inline-block; text-align:center;"></div>
	<div style="height:370px; width:590px; background-color:#cccccc; display:inline-block; text-align:center; margin-top:10px;"><span>graph #5</span></div>
	<div style="height:370px; width:590px; background-color:#cccccc; display:inline-block; text-align:center; margin-top:10px;"><span>graph #6</span></div>
	<div style="width:11px; height:5px; background-color:#898989; display:inline-block; text-align:center;"></div>
	<div style="height:370px; width:590px; background-color:#cccccc; display:inline-block; text-align:center; margin-top:10px;"><span>graph #7</span></div>
</div>

Open in new window


to

<div class="content">
	<div style="height:370px; width:590px; background-color:#cccccc; display:inline-block; text-align:center;float:left;"><span><table border="1"><tr><td>hello</td></tr></table></span></div>
	<div style="width:11px; height:5px; background-color:#898989; display:inline-block; text-align:center;"></div>
	<div style="height:370px; width:590px; background-color:#b4b4b4; display:inline-block; text-align:center;"><span>graph #2</span></div>
	<div style="width:1200px; height:500px; background-color:#000000; color:#ffffff; margin-top:15px; text-align:center;"><span>graph #3</span></div>
	<div style="height:370px; width:590px; background-color:#cccccc; display:inline-block; text-align:center; margin-top:10px;"><span>graph #4</span></div>
	<div style="width:11px; height:5px; background-color:#898989; display:inline-block; text-align:center;"></div>
	<div style="height:370px; width:590px; background-color:#cccccc; display:inline-block; text-align:center; margin-top:10px;"><span>graph #5</span></div>
	<div style="height:370px; width:590px; background-color:#cccccc; display:inline-block; text-align:center; margin-top:10px;"><span>graph #6</span></div>
	<div style="width:11px; height:5px; background-color:#898989; display:inline-block; text-align:center;"></div>
	<div style="height:370px; width:590px; background-color:#cccccc; display:inline-block; text-align:center; margin-top:10px;"><span>graph #7</span></div>
</div>

Open in new window

0
 

Author Comment

by:brucegust
ID: 40615354
Nathan, that worked, but why did it work?

I started with using "floats" for all my divs, then found an article that recommended a simpler approach using the inline-block dynamic. I've never seen "display:inline-block" AND "float:left;" in the same div. Why does that work?

Thanks for your help!
0
 
LVL 11

Expert Comment

by:N R
ID: 40615372
Hmm...not sure, when trying to stack divs next to each other I've always used floats.

One of the experts on the question above may be able to explain further.
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 40615400
The inline-block value causes a block element like a div to behave like a replaced element.  What is a replaced element you ask?

This is how MDN describes it:

In CSS, a replaced element is an element whose representation is outside the scope of CSS. These are kind of external objects whose representation is independent of the CSS. Typical replaced elements are <img>, <object>, <video> or form elements like <textarea> and <input>. Some elements, like <audio> or <canvas> are replaced elements only in specific cases. Objects inserted using the CSS content properties are anonymous replaced elements.

CSS handles replaced elements specifically in some cases, like when calculating margins and some auto values.

Note that some replaced elements, but not all, have intrinsic dimensions or a defined baseline, which is used by some CSS properties like vertical-align.


Cd&
0
 

Author Comment

by:brucegust
ID: 40615489
Thank you, gentlemen! Much appreciated - not just the "what" but the "why" as well!
0
 

Author Comment

by:brucegust
ID: 40615490
0

Featured Post

Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

This is a how to build your own CSS3 slideshow and when I say CSS3 I mean just CSS with no javascript in sight! There a few examples online of how to do this but most just show you an example without any explanation, others make it more complicat…
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
In this Micro Tutorial users will learn how to embed custom fonts into websites using @font-face in CSS Select a font: Ensure the EULA allows you to use @font-face: Download the font: Get the browser-compatible files you need: Edit your CSS       - Name …
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…

860 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question