Responsive boxes on one page (no scrolling)

[Nic727]

Hi,

 

I'm looking to do something like that, but I don't know if it's possible.

 

 

So I know how to put my buttons fixed at the bottom, but I don't really know if I should put fixed to other boxes (div) too or not. I hope you understand what I mean in this picture.

 

Thank you

[Nic727]

Is it possible with that?

http://stackoverflow.com/questions/16414143/how-to-assign-percentage-values-to-div-to-divide-entire-page-into-3-parts-with-b

 

The only thing I don't know about this method is if I can make this responsive like I want with javascript.

 

- Maybe Title = 10% height

- Maybe Image div = 60% height

- Maybe buttons = 30% height.

 

The thing is that if I click on a button, I want text to appear (with height matching the text length) just between the image and the buttons and at the same time, resizing the image.

 

I know this topic could be a mix of CSS and JS

[dsonesuk]

That only works if parent has fixed height, its height is 100% for body, html the 3 divs must within a div element following the body element for this to work. Problem with this parent div using 100% height means it will not extend beyond of height of browser window, using min-height: 100%; would be better. Any padding, margins using for top, bottom must be included as part of total height. Image, text height can vary and may not match percentage value you have alloewed for for these areas.

[Nic727]

Hmm... It doesn't work really well. Can you look at that?

<header class="title"><h1>Parcours d'un souvenir</h1></header><div class="image">	<img class="brain" id="brain" src="img/brain.gif" alt="Brain"></div><div class="text"><p id="text"> </p></div><div class="boutons"><ul class="ranger1">	<li class="bouton" id="bouton1" onclick="changeImage(1)" ><h3>Encodage</h3></li>	<li class="bouton" id="bouton2" onclick="changeImage(2)" ><h3>Récupération</h3></li></ul><ul class="ranger2">	<li class="bouton" id="bouton3" onclick="changeImage(3)" ><h3>Stockage</h3></li>	<li class="bouton" id="bouton4" onclick="changeImage(4)" ><h3>Consolidation</h3></li></ul></div>

/* CSS *//*============= Default styling =============*/body{	color: white;	background-color: #030726;	margin: 0;	height: 100%;	min-height: 100%;}.image{	height:60%}.boutons{	bottom: 0px;	display: block;	width: 100%;	height:30%}.title{	height:10%;	}h1{	text-align: center;}h3{	vertical-align: middle;}img{	display: block;    margin-left: auto;    margin-right: auto;	width: 60%;}.ranger1{	width:100%;	list-style: none;	padding: 0;	margin: 0;}.ranger2{	width: 100%;	list-style: none;	padding: 0;	margin: 0;}/*============= BUTTONS =============*/.bouton{	display: inline-block;	text-align: center;	background-color: blue;	border: 1px  solid white;	width: 50%;	margin: 0px -2px;	height: 60px;}.bouton:hover{	background-color: red;	cursor: pointer;}.bouton:active{	background-color: green;}/*============= RESPONSIVE =============*/@media screen and (min-width: 1200px){img{	width: 500px;}}@media screen and (max-width: 445px){img{	display: block;    margin-left: auto;    margin-right: auto;	width: 80%;	margin-top: 70px;}}@media screen and (max-width: 360px){img{	display: block;    margin-left: auto;    margin-right: auto;	width: 80%;	margin-top: 20px;}}/*============= HIDDEN TEXT BLOCK =============*/.text{background-color: yellow;color: black;font-size: 24px;text-align: justify;}

​​It doesn't work. When the new "Div" with the text appear, the buttons are going down, but I want everything stay at his place, but the image going smaller when the text appear. Also, if everything was working great, it would make a better responsive version. Edited October 29, 2015 by Nic727

[dsonesuk]

But! That is the meaning of responsiveness? To have it stay at exact same place it would have to be fixed the oppisite of responsive.You have to set a empty area for text present in ALL circumstances wether there is text or not, then you have to make sure image, text, with all there element padding/margin are able to fit within there percentage container height area.Remember! what is one line small amount of text in desktop, can be 4 or more lines of text in mobile.

[Shipra Kaul]

The boxes should be aligned properly if you’re trying to make it available for all sorts of users. Responsive web design demands the alignment of objects in a centralized manner such that everything contained in the page is visible without any hiccups.

http://www.innomediatechnologies.com/