Webmaster Forum

Go Back   Webmaster Forum > Web Development > Coding Forum

Coding Forum Problems with your code? Discuss coding issues, including JavaScript, PHP & MySQL, HTML & CSS, Flash & ActionScript, and more.


Reply
 
Thread Tools Display Modes
Share |
  #1  
Old 12-27-2014, 01:56 PM
georgeweballey13's Avatar
georgeweballey13 georgeweballey13 is offline
Contributing Member
 
Join Date: 09-26-14
Location: athens,greece
Posts: 162
iTrader: 0 / 0%
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
 
Reply With Quote

Advertisement

Advertisement

  #2  
Old 12-27-2014, 03:49 PM
Food Safety Trainer's Avatar
Food Safety Trainer Food Safety Trainer is offline
Contributing Member
 
Join Date: 12-06-14
Location: Austin Texas
Posts: 57
iTrader: 0 / 0%
There is a good responsive video training course at Lynda.com. You can get 30 days free and learn a lot about web design. Learnable.com is another one, but with a lot less content. I learned a great deal about responsive web design in their course.
 
Reply With Quote
  #3  
Old 12-30-2014, 07:25 AM
georgeweballey13's Avatar
georgeweballey13 georgeweballey13 is offline
Contributing Member
 
Join Date: 09-26-14
Location: athens,greece
Posts: 162
iTrader: 0 / 0%
Thanks for the help, but i found faster solution than watching video!

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)
 
Reply With Quote
Go Back   Webmaster Forum > Web Development > Coding Forum

Reply


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

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 On
HTML code is Off

Forum Jump

Similar Threads
Thread Thread Starter Forum Replies Last Post
Responsive CSS smsabbir480 Web Design Lobby 3 07-12-2014 06:41 AM
Responsive Website easyarticles SEO Forum 16 11-25-2013 01:42 AM
PSD to Responsive HTML5 ahlacav Sell Web Services 0 01-24-2013 04:10 PM


V7N Network
Get exposure! V7N I Love Photography V7N SEO Blog V7N Directory


All times are GMT -7. The time now is 07:06 PM.
Powered by vBulletin
Copyright 2000-2014 Jelsoft Enterprises Limited.
Copyright © 2003 - 2018 VIX-WomensForum LLC