PDA

View Full Version : Responsive css help please



marios.frag
12-27-2014, 07:33 PM
Let's say I have 2 divs that I want to be aside. Either with float:left,either with display:inline-block.
The div with id #div1 I want to be responsive with max-width:700px and the div with #div2, I want o have standard width. Let's say 200px.
I want when the user decreases the size of the browser, the left div (#div1), to minimize it's width, WITHOUT sending the right div (#div2) under.
I want the right div, to be under, only when REALLY dont fits in the screen.
And the left div, to behave just like it is alone. To really decrease it's width.
Is is possible ??? If yes, HOW ????
I dont use and css framework.

An example here:http://archipelago-lng.eu/Results/Publications.html

The left div (the one with the right border), and the right div-column.
Right now, i'm changing the left div's width, with media queries.
But, i want to behave just as when it's alone. (minimize it enough), to see that the red border really decreases...

Thanks in advance

marios.frag
12-30-2014, 01:16 PM
I found the solution!

For those who are interest:
--------------------------
<div id="div1">Content 1 here</div>
<div id="div2">Content 2 here</div>
<div style='clear:both;'></div>

<style>
#div1{float:left; height:auto; min-height:200px; width:calc(100%-220px);}
#div2{float:left; height:auto; min-height:200px; width:200px;}
</style>

Check now , int the above link how smoothly it works!
Much better than the media queries (i use it know for only one situation, below 500px width)

johnwest
01-21-2015, 09:41 AM
Some suggestions i can suggest you are:
- Use view port meta tag in responsive web design
- Say clear after the float class comes
- Use responsive design frameworks which can change their shape according to the screen size.

If you use a frame work your work will become easier, you can overcome browser compatibility issue also.

marios.frag
02-01-2015, 12:54 PM
Thanks for your answers.

But can u tell me what is the use of view port meta tag?
Any example?

randiv
02-23-2015, 06:49 AM
Thanks, This is very informative information.

riprook7
05-20-2015, 10:01 AM
Very good information thanks for sharing.

sparrow12
04-18-2016, 09:44 AM
Thanks for the information

csshtmldev
04-23-2016, 07:52 PM
Responsive web design helps to adjust the width of the web page in mobile devices. View port meta tag helps to tell us whether we need to make a web page responsive or not.

StuartSpindlow1
05-18-2016, 01:09 PM
I have no ideas.