CSS Span Rows

Please see attached html. This renders as the attached image.

Css file W3.css also attached.

What I want to do is have the photo on the right span all the content on the left, ideally vertically centered in the available space.

Is there any way to do this in the context of the existing css?

Or add some css to make it happen?

Thanks.
summary_test.htm
W3.css
rendering.jpg
Richard KortsBusiness Owner / Chief DeveloperAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Slick812Commented:
greetings Richard Korts, , , , I worked with your HTML in firefox browser, and My problem is mostly trying 2 understand what u need to have changed, because u say -
   "photo on the right span all the content on the left"
which I more or less can see what u mean,  , BUT you say next -
   "ideally vertically centered in the available space"
which has NO MEANING for me at all. what "vertically centered" ? ?  , ,and what is the "available space" u talk about? ?

here is some code that for me, would arrange this page in a more user friendly view and understanding, with just a little change in the html.

<!DOCTYPE html>
<html><head><title>Lakos Sizing Tool - Summary</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="W3.css">
<style>
.displayed {
    display: block;
    margin-left: auto;
    margin-right: auto }
</style>	
<script>
ac = "";
	function chk_vals() {
		if (ac == "b") {
			return true;
		}
		if (ac == "r") {
			document.st.action = "setup.php";
			return true;
		}
	}		
</script>
</head>
<body>
<div class="w3-container w3-dkblue">
  <h1><img src="images/logo.jpg" alt="LOGO">&nbsp;Sizing Tool Summary</h1>
  <p></p>
</div>
<form method="post" name="st" action="setup.php" onSubmit="return chk_vals();">
<input type="hidden" name="ua">
<div class="w3-row-padding">
<div class="w3-half w3-lklgreen" style="text-align: center;">
	<h2 class="w3-text-black">System Summary</h2>
</div>
</div>
<div class="w3-half" style="float:none; text-align: center;">
    <img src="images/TCX-TCI.jpg" alt="micron">
</div>
<div class="w3-row-padding">
	<div class="w3-half" style="font-weight: bold;">Type of Filtration</div>
</div>	
<div class="w3-row-padding">
	<div class="w3-quarter" style="padding-left:26px">System Selected</div>
	<div class="w3-quarter">Basin Cleaning</div> 
</div>
<div class="w3-row-padding">
	<div class="w3-quarter" style="padding-left:26px">Filtration Level</div>
	<div class="w3-quarter">74&nbsp;Micron Filtration</div> 
</div>
<div class="w3-row-padding">
	<div class="w3-half" style="font-weight: bold;">Flow Rate</div>
</div>	
<div class="w3-row-padding">
	<div class="w3-quarter" style="padding-left:26px">Required Flow Rate</div>
	<div class="w3-quarter">720</div> 
</div>
<div class="w3-row-padding">
	<div class="w3-quarter" style="padding-left:26px">Recommend Model</div>
	<div class="w3-quarter">TCI-0825</div> 
</div>
<div class="w3-row-padding">
	<div class="w3-half" style="font-weight: bold;">Purge Selection</div>
</div>
<div class="w3-row-padding">
	<div class="w3-quarter" style="padding-left:26px">Purge Selected</div>
	<div class="w3-quarter">Yes</div> 
</div>	
<div class="w3-row-padding">
	<div class="w3-quarter" style="padding-left:26px">Type(s)</div>
	<div class="w3-quarter">EFS</div> 
</div>
	
<div class="w3-row-padding">
	<div class="w3-half" style="font-weight: bold;">Other Options</div>
</div>
<div class="w3-row-padding">
	<div class="w3-quarter" style="padding-left:26px">Accessible Seperator</div>
	<div class="w3-quarter">No</div> 
</div>	
<div class="w3-row-padding">
	<div class="w3-quarter" style="padding-left:26px">Voltage</div>
	<div class="w3-quarter">208V 60Hz</div> 
</div>	
<div class="w3-row-padding">
	<div class="w3-quarter" style="padding-left:26px">Valve Kit</div>
	<div class="w3-quarter">ECV</div>
</div>	
<div class="w3-row-padding">
	<div class="w3-quarter" style="padding-left:26px">PE Pump</div>
	<div class="w3-quarter">No</div> 
</div>
<div class="w3-row-padding">
	<div class="w3-half" style="font-weight: bold;">Pricing</div>
</div>
<div class="w3-row-padding">
	<div class="w3-quarter" style="padding-left:26px">Base Price, TCI-0825</div>
	<div class="w3-quarter">$15,650.00</div> 
</div>	
	<div class="w3-row-padding">
		<div class="w3-quarter" style="padding-left:26px">Purge Option</div>
		<div class="w3-quarter">$1,500.00</div> 
	</div>
	
	<div class="w3-row-padding">
		<div class="w3-quarter" style="padding-left:26px">Valve Option</div>
		<div class="w3-quarter">$1,220.00</div> 
	</div>
	
	
<div class="w3-row-padding">
	<div class="w3-quarter" style="font-weight: bold;">Total Price</div>
	<div class="w3-quarter">$18,370.00</div> 
</div>	
<div class="w3-row-padding">
	<div class="w3-quarter displayed" ><input type="submit" value="Adjust Values" onMousedown="ac='b';"></div>
	<div class="w3-quarter displayed"><input type="submit" value="Start Over" onMousedown="ac='r';"></div> 
</div>	
</form>	
</body>
</html>

Open in new window


I moved the <div> with the <img src="images/TCX-TCI.jpg">  OUTSIDE of the container of  <div class="w3-row-padding">  to have it be below the title, and removed the float assigned to it, I hope you meant "horizontal centering" as that'ts what I did.

I did NOT change the W3.css at all for this. so it is still responsive, a far as I can tell.
please try this and tell me of any adjustments needed.
Richard KortsBusiness Owner / Chief DeveloperAuthor Commented:
I want the image to be on the RIGHT half of the page & the rest of the junk on the left half.

I am going to post another question that has a more simplistic example of what I want to do.

I will call it "divs stacked horizontally".

Look for it in a few minutes
Slick812Commented:
OK, but what the point of this question? if you post another one?
Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

Slick812Commented:
OK, here is another attempt, at your display, I had to add a container around all of the text-specs rows and columns, to get the float right Image to work -

	
<!DOCTYPE html>

<html>
<head>
<title>Lakos Sizing Tool - Summary</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="W3.css">
<style>
.displayed {
    display: block;
    margin-left: auto;
    margin-right: auto }
</style>	
<script type="text/javascript">
ac = "";
	function chk_vals() {
		if (ac == "b") {
			return true;
		}
		if (ac == "r") {
			document.st.action = "setup.php";
			return true;
		}
	}		
</script>
</head>
<body>
<div class="w3-container w3-dkblue">
  <h1><img src="images/logo.jpg" alt="LOGO">&nbsp;Sizing Tool Summary</h1>
  <p></p>
</div>
<form method="post" name="st" action="setup.php" onSubmit="return chk_vals();">
<input type="hidden" name="ua">

<div class="w3-row-padding">
<div class="w3-half w3-lklgreen" style="text-align: center;">
	<h2 class="w3-text-black">System Summary</h2>
</div>
</div>
<div class="w3-half" style="float:right; background: #dfd; padding-top: 15%;">
    <img src="images/TCX-TCI.jpg" alt="micron">
</div>
<div class="w3-half">
<div class="w3-row-padding" style="background: #fdd;">
	<div class="w3-half" style="font-weight: bold;">Type of Filtration</div>
</div>
	
<div class="w3-row-padding">
	<div class="w3-quarter" style="padding-left:26px">System Selected</div>
	<div class="w3-quarter">Basin Cleaning</div> 
</div>
<div class="w3-row-padding">
	<div class="w3-quarter" style="padding-left:26px">Filtration Level</div>
	<div class="w3-quarter">74&nbsp;Micron Filtration</div> 
</div>
<div class="w3-row-padding">
	<div class="w3-half" style="font-weight: bold;">Flow Rate</div>
</div>	
<div class="w3-row-padding">
	<div class="w3-quarter" style="padding-left:26px">Required Flow Rate</div>
	<div class="w3-quarter">720</div> 
</div>
<div class="w3-row-padding">
	<div class="w3-quarter" style="padding-left:26px">Recommend Model</div>
	<div class="w3-quarter">TCI-0825</div> 
</div>
<div class="w3-row-padding">
	<div class="w3-half" style="font-weight: bold;">Purge Selection</div>
</div>
<div class="w3-row-padding">
	<div class="w3-quarter" style="padding-left:26px">Purge Selected</div>
	<div class="w3-quarter">Yes</div> 
</div>	
<div class="w3-row-padding">
	<div class="w3-quarter" style="padding-left:26px">Type(s)</div>
	<div class="w3-quarter">EFS</div> 
</div>
	
<div class="w3-row-padding">
	<div class="w3-half" style="font-weight: bold;">Other Options</div>
</div>
<div class="w3-row-padding">
	<div class="w3-quarter" style="padding-left:26px">Accessible Seperator</div>
	<div class="w3-quarter">No</div> 
</div>	
<div class="w3-row-padding">
	<div class="w3-quarter" style="padding-left:26px">Voltage</div>
	<div class="w3-quarter">208V 60Hz</div> 
</div>	
<div class="w3-row-padding">
	<div class="w3-quarter" style="padding-left:26px">Valve Kit</div>
	<div class="w3-quarter">ECV</div>
</div>	
<div class="w3-row-padding">
	<div class="w3-quarter" style="padding-left:26px">PE Pump</div>
	<div class="w3-quarter">No</div> 
</div>
<div class="w3-row-padding">
	<div class="w3-half" style="font-weight: bold;">Pricing</div>
</div>
<div class="w3-row-padding">
	<div class="w3-quarter" style="padding-left:26px">Base Price, TCI-0825</div>
	<div class="w3-quarter">$15,650.00</div> 
</div>	
	<div class="w3-row-padding">
		<div class="w3-quarter" style="padding-left:26px">Purge Option</div>
		<div class="w3-quarter">$1,500.00</div> 
	</div>
	
	<div class="w3-row-padding">
		<div class="w3-quarter" style="padding-left:26px">Valve Option</div>
		<div class="w3-quarter">$1,220.00</div> 
	</div>
	
	
<div class="w3-row-padding">
	<div class="w3-quarter" style="font-weight: bold;">Total Price</div>
	<div class="w3-quarter">$18,370.00</div> 
</div>	
<div class="w3-row-padding">
	<div class="w3-quarter displayed" ><input type="submit" value="Adjust Values" onMousedown="ac='b';"></div>
	<div class="w3-quarter displayed"><input type="submit" value="Start Over" onMousedown="ac='r';"></div> 
</div>
</div>
</form>	
</body>
</html>

Open in new window

I  put a visible background on two elements to see what they occupied, you can remove after development, I gave a Top Padding to the image <div> to move it down, to a place that might be considered a center, you can change the -
    padding-top: 15%;
to move as you see what may match your display specs

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Richard KortsBusiness Owner / Chief DeveloperAuthor Commented:
Slick812,

The "point" of the other question is to pose the issue in simpler terms.

If I get a working solution from you, I will just delete that question.

I will test your latest.

Thanks
Richard KortsBusiness Owner / Chief DeveloperAuthor Commented:
Slick812,

That looks great; can I vertically align the image in the right div to center, vertically?
Like the old html vlaign="center" (or maybe it was "middle").

Thanks
Slick812Commented:
I looked at your other question and the code of the example page you thought was for this, however, that page does not do any "responsive" changes as the W3.css, does, I considered this and looked at the responsive for what I did, and I made a few changes, which may or may not be better as follows -

<!DOCTYPE html><html><head><title>Lakos Sizing Tool - Summary</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="W3.css">
<style>
.displayed {
    display: block;
    margin-left: auto;
    margin-right: auto }
	
#img1{padding-top: 9em;}
	
@media (max-width:1053px){#img1{padding-top: 11em;}}
@media (max-width:605px){#img1{padding-top: 0; text-align: center;}}
</style>	
<script type="text/javascript">
ac = "";
	function chk_vals() {
		if (ac == "b") {
			return true;
		}
		if (ac == "r") {
			document.st.action = "setup.php";
			return true;
		}
	}		
</script>
</head>
<body>
<div class="w3-container w3-dkblue">
  <h1><img src="images/logo.jpg" alt="LOGO">&nbsp;Sizing Tool Summary</h1>
  <p></p>
</div>
<form method="post" name="st" action="setup.php" onSubmit="return chk_vals();">
<input type="hidden" name="ua">

<div class="w3-row-padding">
<div class="w3-half w3-lklgreen" style="text-align: center;">
	<h2 class="w3-text-black">System Summary</h2>
</div>
</div>
<div id="img1" class="w3-half" style="float:right; background: #dfd;">
    <img src="images/TCX-TCI.jpg" alt="micron"> padding-top: 15%;
</div>
<div class="w3-half">
<div class="w3-row-padding" style="background: #fdd;">
	<div class="w3-half" style="font-weight: bold;">Type of Filtration</div>
</div>
	
<div class="w3-row-padding">
	<div class="w3-quarter" style="padding-left:26px">System Selected</div>
	<div class="w3-quarter">Basin Cleaning</div> 
</div>
<div class="w3-row-padding">
	<div class="w3-quarter" style="padding-left:26px">Filtration Level</div>
	<div class="w3-quarter">74&nbsp;Micron Filtration</div> 
</div>
<div class="w3-row-padding">
	<div class="w3-half" style="font-weight: bold;">Flow Rate</div>
</div>	
<div class="w3-row-padding">
	<div class="w3-quarter" style="padding-left:26px">Required Flow Rate</div>
	<div class="w3-quarter">720</div> 
</div>
<div class="w3-row-padding">
	<div class="w3-quarter" style="padding-left:26px">Recommend Model</div>
	<div class="w3-quarter">TCI-0825</div> 
</div>
<div class="w3-row-padding">
	<div class="w3-half" style="font-weight: bold;">Purge Selection</div>
</div>
<div class="w3-row-padding">
	<div class="w3-quarter" style="padding-left:26px">Purge Selected</div>
	<div class="w3-quarter">Yes</div> 
</div>	
<div class="w3-row-padding">
	<div class="w3-quarter" style="padding-left:26px">Type(s)</div>
	<div class="w3-quarter">EFS</div> 
</div>
	
<div class="w3-row-padding">
	<div class="w3-half" style="font-weight: bold;">Other Options</div>
</div>
<div class="w3-row-padding">
	<div class="w3-quarter" style="padding-left:26px">Accessible Seperator</div>
	<div class="w3-quarter">No</div> 
</div>	
<div class="w3-row-padding">
	<div class="w3-quarter" style="padding-left:26px">Voltage</div>
	<div class="w3-quarter">208V 60Hz</div> 
</div>	
<div class="w3-row-padding">
	<div class="w3-quarter" style="padding-left:26px">Valve Kit</div>
	<div class="w3-quarter">ECV</div>
</div>	
<div class="w3-row-padding">
	<div class="w3-quarter" style="padding-left:26px">PE Pump</div>
	<div class="w3-quarter">No</div> 
</div>
<div class="w3-row-padding">
	<div class="w3-half" style="font-weight: bold;">Pricing</div>
</div>
<div class="w3-row-padding">
	<div class="w3-quarter" style="padding-left:26px">Base Price, TCI-0825</div>
	<div class="w3-quarter">$15,650.00</div> 
</div>	
	<div class="w3-row-padding">
		<div class="w3-quarter" style="padding-left:26px">Purge Option</div>
		<div class="w3-quarter">$1,500.00</div> 
	</div>
	
	<div class="w3-row-padding">
		<div class="w3-quarter" style="padding-left:26px">Valve Option</div>
		<div class="w3-quarter">$1,220.00</div> 
	</div>
	
	
<div class="w3-row-padding">
	<div class="w3-quarter" style="font-weight: bold;">Total Price</div>
	<div class="w3-quarter">$18,370.00</div> 
</div>	
<div class="w3-row-padding">
	<div class="w3-quarter displayed" ><input type="submit" value="Adjust Values" onMousedown="ac='b';"></div>
	<div class="w3-quarter displayed"><input type="submit" value="Start Over" onMousedown="ac='r';"></div> 
</div>
</div>
</form>	
</body></html>

Open in new window


I say a couple oh other things, which are just opinions, and may or may not help, the text columns are really POOR at responsive, they unnecessarily drop into two rows at inappropriate widths .

also you do NOT need the javascript for the two form submit buttons, just give them TWO different names -    
<input type="submit" name="sub-av" value="Adjust Values" />
<input type="submit" name="sub-so" value="Start Over" />

and when submitted, the form will ONLY send up the name of the select used. you can just use is_set() to test for the name in the $_POST array in PHP.
Slick812Commented:
you ask -
    "can I vertically align the image in the right div"
I have tried to do that many times, and there are some CSS, that can do it, but not so successfully in all browsers and versions.
An Image has got the "valign" attribute, which you can also do in css, however this does NOT align it to the container position, but to the position of elements NEXT to the image. My opinion - the only sure fire way to get the DIV contents to be ver aligned center, is to use a <table>  <td> instead of <div> and set the valign to middle or the css to set as -
     <td style="vertical-align: middle;">

But that raises another problem the height of the image container
, as the HTML I have there does NOT at all have the  image container <div> the same height as the text rows, and this would require added containers and height considerations, which I guess can be done, but it may be far easier to set a couple of -
     @media (max-width:1053px){ )
and give the image placement a closse enough placement, as this is NOT an artistic site, but a tech spec sell sell site, and the users will not even notice any artistic efforts you make to center any image.
Richard KortsBusiness Owner / Chief DeveloperAuthor Commented:
Thanks for all your css insight.
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.