1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Please help me arrange these 3 divs I'm dumb

Discussion in 'CSS' started by ketting00, Aug 2, 2015.

0
  1. #1
    Hi guys,

    I use to do something like this with ease. But today is not my day, after several hours tried and failed I decide to give up and consult the forum.

    I want something like this:
    3divs.png
    Additional information:
    The DIV1 is in the first MySQL query loop. The DIV2 and DIV3 are in the second MySQL query loop. Is this relevant?

    Thank you,
     
    Solved! View solution.
    ketting00, Aug 2, 2015 IP
  2. qwikad.com

    qwikad.com Illustrious Member Affiliate Manager

    Messages:
    7,151
    Likes Received:
    1,656
    Best Answers:
    29
    Trophy Points:
    475
    #2
    qwikad.com, Aug 2, 2015 IP
  3. #3
    Quick and dirty?
    Try this as a basis: 
    
<!DOCTYPE HTML>
<html>
  <head>
  <meta http-equiv="Content-Type"
      content="text/html; charset=utf-8">
  <title>
    Test document
  </title>
  <style type="text/css">
/*<![CDATA[*/

  body {
      background-color: white;
      color: black;
      font: 100%/1.25 sans-serif;
      margin: 0;
      padding: 1.25em;
  }

  p {
      font-size: 1em;
  }

  #query-wrapper {
      /* for clarity */
      border: 1px solid gray;
      /* encloses the float */
      overflow: hidden;
      max-width: 30em;
  }

  #primary-query {
      float: left;
      width: 15em;
  }

  #primary-query div,
  #secondary-queries div {
      border: 1px solid black;
      margin: 1.25em;
  }

  #secondary-queries {
      min-width: 15em;
      /* provides a new block formatting context so
         column is aware of the float next to it */
      overflow: hidden;
  }


      /*]]>*/
  </style>
  </head>
  <body>
    <div id="query-wrapper">
      <div id="primary-query">
        <div>
          <p>
            This is your div1
          </p>
        </div>
      </div>

      <div id="secondary-queries">
        <div>
          <p>
            This is your div2
          </p>
        </div>

        <div>
          <p>
            This is your div3
          </p>
        </div>
      </div>
    </div>
  </body>
</html>
    Code (markup):
    cheers,

    gary
     
    Last edited: Aug 2, 2015
    kk5st, Aug 2, 2015 IP
  4. ketting00

    ketting00 Well-Known Member

    Messages:
    772
    Likes Received:
    27
    Best Answers:
    3
    Trophy Points:
    128
    #4
    Thank you guys,
    All are working.
    gary's method seem to be the better solution. Every element is free. I mean two on the right are not wrapping into one big box one.

    But why he created a padding div.

    Cheers,
     
    ketting00, Aug 2, 2015 IP
  5. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #5
    I'd point out that if these are going to be looped multiple times per page, one should be using classes, not ID's. Remember, an ID can/should only exist ONCE on a page.

    I'm also not sure why Gary set a min-width but no float drop prevention... much less the 1EM font size on a P (aka the default behavior in EVERYTHING). The extra DIV are likely in there to deal with the fact that mixing width and padding or margins at the same time is a headache and a half... But I'm seeing THAT STUPID MALFING IDIOTIC "metric-less line-height" bullshit that the halfwits at sitepoint claims works (when it DOES NOT!!!)

    That said I'd have to see the REAL content and not some goofy placeholder to say for sure as this is dicking around with div instead of letting the content dictate the markup.

    <div class="resultWrapper">

	<div class="firstQuery">
	
		<div>
			<p>
				This is your div1
			</p>
		</div>
		
	<!-- .firstQuery --></div>
	
  <div class="secondQueries">
  
		<div>
			<p>
				This is your div2
			</p>
		</div>

		<div>
			<p>
				This is your div3
			</p>
		</div>
		
	<!-- .secondQueries --></div>
	
<!-- .resultWrapper --></div>
    Code (markup):
    html, body, div, p {
	margin:0;
	padding:0;
}

body {
	font:normal 100%/150% arial,helvetica,sans-serif;
	padding: 1.25em;
	color:#000;
	background:#FFF;
}

p {
	padding-bottom:1em;
}

.resultWrapper,
.secondQueries {
	overflow:hidden; /* wrap floats and margins */
	zoom:1; /* trip haslayout, wrap floats and margins legacy IE */
}

.resultWrapper {
	min-width:30em;
	max-width:60em; /* really this should be on a parent element */
	border: 1px solid #888;
}

.resultWrapper div div {
	margin:1.25em;
	border:1px solid #000;
}

.firstQuery {
	float:left;
	width:15em;
}
    Code (markup):
    The overflow:hidden and zoom on the .secondQueries will prevent it (and it's content) from dropping below .firstQuery should one be longer than the others.

    Also, are you looking for them all to expand to equal height for whatever is longest? That has it's own complications that can be addressed by abusing table-cell, screwing with positioning if you can predict the size (not always an option), a method called "faux columns", or using newer layout techniques like flex-box that may or may not work across all modern browsers. (flex not even EXISTING on IE9 or earlier)

    ... and again CLASSES so you can use it more than once... since that's how I'm interpreting what was asked. Depending on the content many of the DIV and even possibly some of the classes may be unneccessary/unwarranted/complete waste of code. Again this is why ACTUAL content and not "oh I want some div this way" is important.

    Samples of your query result parsing logic would also help dial it in.
     
    deathshadow, Aug 5, 2015 IP
  6. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #6
    Because I wanted to force the element to drop, but its content not wrap, rather than become thinner and thinner.

    Probably force of habit left over from IE's inheritance issues combined with its piss-poor support for display. Who knows now?

    True. Trying to be generic causes bloat.

    I have not run into the issue. Edge case? Perhaps you could post an example plus its affected UA?

    gary
     
    kk5st, Aug 5, 2015 IP
  7. ketting00

    ketting00 Well-Known Member

    Messages:
    772
    Likes Received:
    27
    Best Answers:
    3
    Trophy Points:
    128
    #7
    Thanks for more info.

    I have to say I'm satisfied with gary's approach. It gives me better control of the layout on different screen size. I'm not aiming at PC anymore, since most PC users use AdBlock.

    cheers,
     
    ketting00, Aug 5, 2015 IP
  8. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #8
    Set the OS to 120dpi or whatever it is called on your system, tell IE to obey it and not use zoom instead. Broken. It won't inherit and will stay fixed. Same for Opera 12- and it seems totally banjaxed IE7/earlier no matter what the setting. (quite often resulting in line-heights shorter than the font-size!)

    Set FF to use "size 20" or larger, the line height without a metric acts as if it's still set to 16px.

    Laughably, Vivaldi also seems to have this problem with the font scaling plugin meant for chrome, even though chrome does not...

    About four years ago I had a go-around with the folks at sitepoint where a certain "advisor" that I had respect for went into flat out denial mode over it no matter how many examples, test cases, screen shots and instructions I gave -- and when I dared to stand up to them over it, boom say hello to instant lifetime ban... needless to say that is now a major pet peeve of mine because it's 100% flat out broken, and it's not valid or defined as valid by the spec anyways so... Of course over there with the limp wristed sissies and suck-up sycophants anyone with an actual pair ends up walking on egg shells or permabanned because "oh noes, you upset somebody" -- of course to hell with the people being upset by things like bad practices or bad advice since that might get in the way of the sales of their scummy scam artist authors and the corresponding book sales.

    They stopped (like most of the industry) being about writing clean accessible well written websites a decade ago... I only went back to try and keep up what Dan was trying to do there after his death, and what I got in return was the same "status quo, don't upset anyone" treatment that I find more offensive than a Andrew Dice Clay double-album.
     
    deathshadow, Aug 5, 2015 IP
  9. ketting00

    ketting00 Well-Known Member

    Messages:
    772
    Likes Received:
    27
    Best Answers:
    3
    Trophy Points:
    128
    #9
    Sorry to hear about that.

    Sitepoint has a lot brilliant people over there. But it didn't feel an intimate community to hang out with.

    They didn't seem to be serious about best practice too. They just make things happened. And they still fond of JQuery and lots of other frameworks.

    You'll not be pleased. :)

    cheers,
     
    Last edited: Aug 5, 2015
    ketting00, Aug 5, 2015 IP
  10. ketting00

    ketting00 Well-Known Member

    Messages:
    772
    Likes Received:
    27
    Best Answers:
    3
    Trophy Points:
    128
    #10
    Er, I have an issue with what @deathshadow says "no float drop prevention..." now.

    It's a problem with longer content line/column on wider screen.
     
    Last edited: Aug 6, 2015
    ketting00, Aug 6, 2015 IP
  11. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #11
    That's why it's best to set overflow (and haslayout if you give a *** about legacy IE) on the non-floated column and do NOT set it's width. Once that's set that column will always fit next to the floated one without popping beneath it.

    You need to set a min or max for the fluid column, set it on the parent of BOTH. It's just more reliable.

    There were only TWO people over there I had any respect for the opinions of, one of them is dead and the other did a decent job of destroying my opinion of their intellect in a single thread.

    Right now "Brilliant" is the last word I'd use to describe ANYTHING involving their entire site; It's an accessibility disaster filled with bad advice and a "sleaze it out any old way" attitude. Unless you like sycophants and having smoke blown up your ass, it's just not a good place for much of anything anymore.

    Not that on the accessibility or speed front this place is much better, but at least here they don't get their panties in a knot every time someone dares to question the status quo or worse, dares to call a sleazeball scam artist exactly that... something sorely lacking on far too many forums these days as the namby pampy thin skinned metrosexual hipster wussies seem to be taking over the development side of things.

    I'm increasingly dismayed by how many books, sites, tutorials and forums are being churned out by people who make it painfully apparent that they are unqualified to construct a website, much less advise others on how to do so.
     
    Last edited: Aug 6, 2015
    deathshadow, Aug 6, 2015 IP