Solved

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

Posted on 2015-02-17
9
64 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
 
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
Top 6 Sources for Identifying Threat Actor TTPs

Understanding your enemy is essential. These six sources will help you identify the most popular threat actor tactics, techniques, and procedures (TTPs).

 

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

Why You Should Analyze Threat Actor TTPs

After years of analyzing threat actor behavior, it’s become clear that at any given time there are specific tactics, techniques, and procedures (TTPs) that are particularly prevalent. By analyzing and understanding these TTPs, you can dramatically enhance your security program.

Join & Write a Comment

Suggested Solutions

Title # Comments Views Activity
Basic CSS issues 24 34
Video will not go into background 20 28
reposition hamburger icon to top of screen 5 46
CSS grid style change 2 14
Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
This article discusses four methods for overlaying images in a container on a web page
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

757 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

Need Help in Real-Time?

Connect with top rated Experts

19 Experts available now in Live!

Get 1:1 Help Now