Go Back   Site Owners Forums - Webmaster Forums > Web Programming > Programming General > HTML / DHTML

Notices


Reply
 
Thread Tools Rate Thread Display Modes
Old 12-27-2014, 08:51 AM   #1
george.web13
Registered User
 
Join Date: Jul 2014
Location: Athens, Greece
Posts: 462
Responsive css help please

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
__________________

To view links or images in signatures your post count must be 10 or greater. You currently have 0 posts.
|
To view links or images in signatures your post count must be 10 or greater. You currently have 0 posts.
|
To view links or images in signatures your post count must be 10 or greater. You currently have 0 posts.
|
To view links or images in signatures your post count must be 10 or greater. You currently have 0 posts.
|
To view links or images in signatures your post count must be 10 or greater. You currently have 0 posts.
george.web13 is offline   Reply With Quote

Old 01-02-2015, 06:11 AM   #2
george.web13
Registered User
 
Join Date: Jul 2014
Location: Athens, Greece
Posts: 462
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)
__________________

To view links or images in signatures your post count must be 10 or greater. You currently have 0 posts.
|
To view links or images in signatures your post count must be 10 or greater. You currently have 0 posts.
|
To view links or images in signatures your post count must be 10 or greater. You currently have 0 posts.
|
To view links or images in signatures your post count must be 10 or greater. You currently have 0 posts.
|
To view links or images in signatures your post count must be 10 or greater. You currently have 0 posts.
george.web13 is offline   Reply With Quote
Reply


Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
 
Thread Tools
Display Modes Rate This Thread
Rate This Thread:

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is Off
HTML code is Off

Forum Jump

Similar Threads
Thread Thread Starter Forum Replies Last Post
SPECIAL OFFER: Eye Catching Fully Responsive WHMCS theme for $25! graosp Post your ad here 1 11-24-2015 04:06 PM
SPECIAL OFFER: Eye Catching Fully Responsive WHMCS theme for $25! graosp Post your ad here 3 11-08-2015 11:30 PM
SPECIAL OFFER: Eye Catching Fully Responsive WHMCS theme for $25! graosp Post your ad here 0 06-01-2014 11:29 PM
SEO Benefits of Responsive Web Design dennyleon Search Engine Optimization 4 03-23-2014 03:48 AM


All times are GMT -7. The time now is 10:46 PM.


Powered by vBulletin Copyright © 2020 vBulletin Solutions, Inc.