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 04-14-2015, 05:14 AM
ConduciveMammal's Avatar
ConduciveMammal ConduciveMammal is offline
Contributing Member
 
Join Date: 03-28-13
Location: Walsall, UK
Posts: 266
iTrader: 0 / 0%
Side-by-Side divs

Hey guys,

I'm working on some article web pages for work and all was fine until I was asked to use media queries that moves some things around at a certain screen width.

In the image I've attached, you can see "Div1" which is an <article> in the top-left corner, the one with the two <p>'s and a main image (Needs to be censored for copyright reasons), underneath is "Div2" with a similar layout and then there's "RightNav" which is a <section> (The red box on bottom labelled "Recent Articles". When the page is viewed at full computer screen size, "Div1" and "RightNav" is side-by-side, but at smaller sizes, the RightNav is set to display:none;, however even smaller sizes, the <p>'s for Div1 go beneath the image and the RightNav is supposed to occupy that now-empty area.
The problem is, I can't get the RightNav to move to the side of Div1. Could anyone help please?

As this is a business template for all our articles, the solution should ideally be solved with minimal changes to the HTML code and changed mainly in CSS if possible.

Any help would be vastly appreciated.

Note: Ignore the insane colours and basic layout, I used this so I can be sure the syntax is operating properly.

Download the HTML file - When you resize the browser window, you'll know you've hit the sweet spot when the blue's and red's appear (I don't mean the police )

Thanks.


HTML Code:
<div class="article"> <p class="firstP uni-cb"> If you want to build new muscle then you need to master movement in order to lift heavier weights</p> <p class="secondP"> In order to make progress with bodybuilding then you need to train hard. As Shaun Stafford WBFF Pro champion bodybuilder says <a href="/articles-information/bodybuilding/build-brand-new-body">[...]</a></p> </div> <!-- End article --></article> <!-- End large article --><!-- Small article --> <article class="small"> <!-- The article image --><a href="/articles-information/bodybuilding/eat-to-build-whey-casein-protein"><img alt="Article Image" class="articleImg smallMain" src="http://*****.********.com/**/vf/promotionuploads/***/***/*****/eat-to-build_small.jpg" style="float:left" /></a> <!-- The article --> <div class="article"> <h2 class="din-m"> <a href="/articles-information/bodybuilding/eat-to-build-whey-casein-protein">Eat to Build - Whey and Casein</a></h2> <p> &lsquo;I think of training in terms of construction,&rsquo; says Hollywood muscle Joe Manganiello. &lsquo;When I work out I&rsquo;m building a house and the food I eat is the raw material; the bricks that ensure the house is built solid.&rsquo; <a href="/articles-information/bodybuilding/eat-to-build-whey-casein-protein">[...]</a></p> </div> <!-- End article --></article> <!-- End small article --><!-- Small article --><!-- Page footer --> <div class="commentsBottom"> <a class="seeMoreBtn uni-cb blackRightBtn" href="/articles-information">Articles &amp; Information</a> <a class="backtoarticleBtn uni-cb" href="#">Back to top</a></div> <!-- End page footer --></div> <!-- End article --><!-- End small article --><!-- Small article --><!-- End page footer --></div> <aside> <section class="rightnav" style="width:30%; margin-left:68%"> <h2 class="din-m"> Latest Articles</h2> <div id="tabs" role="tabContainer"> <ul class="tabnav" style="background:#fff600"> <li class="uni-cb" style="background:#fff600"> <a class="tab active" href="/articles-information/bodybuilding" role="tab" style="background:#fff600" tab="all">Bodybuilding</a></li> </ul> <div class="panel" role="panel" tab="all"> <article class="first"> <h5 class="din-m"> <a href="/articles-information/bodybuilding/eat-to-build-whey-casein-protein"><img alt="article image" class="articleImg" src="http://*****.********.com/**/vf/promotionuploads/***/***/*****/eat-to-build_small.jpg" /> Eat to Build - Whey and Casein </a></h5> </article> <article> <h5 class="din-m border"> <a href="/articles-information/bodybuilding/build-brand-new-body"><img alt="article image" class="articleImg" src="http://*****.********.com/**/vf/promotionuploads/***/***/*****/build-brand-new-body_small.jpg" /> Build a Brand New Body </a></h5> </article> <a class="blackRightBtn viewAll uni-cb" href="/articles-information">Articles &amp; Information</a></div> </div> </section> </aside> </div>
PHP Code:
@media only screen and (max-width612px) {.overfooter {display:none} .pageheader {display:none}.wrapper {}
    
/*.wrapper{min-width:40%;}*/
    
.container2{width:40%;}
    .
article{background-color:bluewidth:100%}
    .
firstP{float:leftclear:leftmargin-left:0pxwidth:50%}
    .
secondPclear:leftmargin-left:0pxwidth:50%}
    .
largeMain {width:256pxheight:165pxfloat:left;}
    
section.rightnav{background-color:redclear:bothmargin-left:70%;}}
article.small{background-colorred;
        
        
width:40%;}
@
media only screen and (max-width800px) {.overfooter {display:none}} 
 
Reply With Quote

Advertisement

Advertisement

  #2  
Old 04-17-2015, 09:46 AM
georgeweballey13's Avatar
georgeweballey13 georgeweballey13 is offline
Contributing Member
 
Join Date: 09-26-14
Location: athens,greece
Posts: 162
iTrader: 0 / 0%
maybe you must use css property width:calc().

Is there any online link to test it?(i'm not going to download it...)
 
Reply With Quote
  #3  
Old 04-17-2015, 09:50 AM
ConduciveMammal's Avatar
ConduciveMammal ConduciveMammal is offline
Contributing Member
 
Join Date: 03-28-13
Location: Walsall, UK
Posts: 266
iTrader: 0 / 0%
Hmm? I don't believe I've even heard of that property.

I've not got it online sorry, but the above code is all that is required to function so you could load into Notepad or JSFiddle?

Thanks.
 
Reply With Quote
  #4  
Old 04-26-2015, 12:18 PM
georgeweballey13's Avatar
georgeweballey13 georgeweballey13 is offline
Contributing Member
 
Join Date: 09-26-14
Location: athens,greece
Posts: 162
iTrader: 0 / 0%
"I've not got it online sorry, but the above code is all that is required to function so you could load into Notepad or JSFiddle"

So, where is the online link ?
I prefer to check things fast with firebug.
 
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
How to quickly setup side-by-side windows on 19"+ monitor in Win7 DPano Tech Talk 2 06-07-2014 01:50 AM
Pages bouncing from side to side? Johnaranger Coding Forum 6 02-25-2011 06:51 AM


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


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