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.

help with small layout

Discussion in 'CSS' started by Jeremy Benson, Mar 20, 2015.

  1. #1
    Hey,

    I'm messing around with some css, just wondering if someone can help me work the kinks out of this. I'm hoping to get the images to fit the right side div width wise. I tried width:100% on them, but it didn't work... also can't get the image header in bold to line up good... I've got breaks in there because margin wasn't effecting anything, lol.

    Thanks,
    Jeremy.

    <div id="content" style="width:100%;overflow:hidden;">
    <!-- Right column -->
    <div id="rightcolumn" style="float:right; width:28%;">
       <div id="imagedock" style="overflow:hidden; float:right;">
             <div style="display:block; clear:both; overflow:hidden;">
                       <br/>
                      <b style="font-size:x-large; clear:both; margin-top:40px;">Images</b><br/><br/>
               </div>
          <div style="float:right; display:block; clear:both;">
             <img style="" src="guest/images/girlbig1.jpg"/>
             <p><a href="" target="_blank">Enlarge</a></p>
          </div><br/><br/>
          <div style="float:right;display:block;clear:both;">
             <img style="" src="guest/images/girlbig2.jpg"/>
             <p><a>Enlarge</a></p>
          </div>
          <div style="float:right;display:block;clear:both;">
             <img style="" src="guest/images/girlbig3.jpg"/>
             <p><a>Enlarge</a></p>
          </div>
          <div style="float:right;display:block;clear:both;">
             <img style="" src="guest/images/girlbig4.jpg"/>
             <p><a>Enlarge</a></p>
          </div>
          </div>
          <!-- end right column -->
    </div>
      <!-- left column -->
      <div id="leftcolumn" style="width:70%;overflow:hidden;">
          <b style="margin:8px;font-size:x-large;">Listing</b><br/><br/>
          <p style="margin:8px;">This is the post</p><br/>
          <b style="margin:8px;">Education</b>
          <p style="margin:8px;">This is cool.</p><br/>
          <b style="margin:8px; margin-top:8px;">wages</b>
          <p style="margin:8px;">This is cool.</p><br/>
          <b style="margin-left:8px;">Videos</b>
          <div id="videsowrapper" style="margin-left:8px;">
             <div>
               <iframe width="280"  height="157" style="display:inline;" src="https://www.youtube.com/embed/0oFtYrgh70A" frameborder="0" allowfullscreen></iframe>
               <iframe width="280" height="157" style="display:inline;" src="https://www.youtube.com/embed/0oFtYrgh70A" frameborder="0" allowfullscreen></iframe>
               <iframe width="280"  height="157" style="display:inline;" src="https://www.youtube.com/embed/0oFtYrgh70A" frameborder="0" allowfullscreen></iframe>
             </div> 
          </div>
    <!-- end of left column -->
      </div>
      
    
    </div>
    
    Code (markup):

     
    Jeremy Benson, Mar 20, 2015 IP
  2. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #2
    Well, there's a lot of questions that code begs; like what's with the endless pointless inlined style for nothing? What makes single words paragraphs? I don't see framesets and this is 2015, why are you using TARGET and IFRAME? Is there CSS we're not seeing since you have double-div for nothing? What's with the bold tags, are those headings, or the grammatical reason for bold of a title inline in a sentence?

    Laughably (and the opposite of my usual accessment) I think I'd have to see what you're trying to accomplish with this, as the code doesnea make the least bit of sense; admittedly the 28% width on the outer float is just BEGGING for the layout to fail at one width or another given the fixed pixel widths of it's content (unless you're forcing max-width in the style where we aren't seeing it)... but really you've got a laundry list of gibberish non-semantic markup making it quite hard to decipher what it is you even are trying to make this do.

    Guessing WILDLY, and retaining the IFRAME while axing everything else that has ZERO BUSINESS IN THE HTML, we can simplify that down to:

    <div class="columnWrapper">
    
    	<div id="imageDock">
    
    		<h2>Images</h2>
    
    		<a href="guest/images/girlbig1.jpg">
    			<img
    				src="guest/images/girlbig1@thumb.jpg"
    				alt="DESCRIBE THIS!!!"
    			/>
    			Enlarge
    		</a><br />
    
    		<a href="guest/images/girlbig2.jpg">
    			<img
    				src="guest/images/girlbig2@thumb.jpg"
    				alt="DESCRIBE THIS!!!"
    			/>
    			Enlarge
    		</a><br />
    
    		<a href="guest/images/girlbig3.jpg">
    			<img
    				src="guest/images/girlbig3@thumb.jpg"
    				alt="DESCRIBE THIS!!!"
    			/>
    			Enlarge
    		</a><br />
    
    		<a href="guest/images/girlbig4.jpg">
    			<img
    				src="guest/images/girlbig4@thumb.jpg"
    				alt="DESCRIBE THIS!!!"
    			/>
    			Enlarge
    		</a>
    
    	<!-- #imageDock --></div>
    
    	<div id="content">
    
    		<h2>Listing</h2>
    		<p>This is the post</p>
    
    		<h2>Education</h2>
    		<p>This is cool.</p>
    
    		<h2>Wages</h2>
    		<p>This is cool.</p>
    
    		<div id="videos">
    			<h2>Videos</h2>
    			 <iframe
    				width="280" height="157"
    				src="https://www.youtube.com/embed/0oFtYrgh70A"
    			></iframe>
    			<iframe
    				width="280" height="157"
    				src="https://www.youtube.com/embed/0oFtYrgh70A"
    			></iframe>
    			<iframe
    				width="280" height="157"
    				src="https://www.youtube.com/embed/0oFtYrgh70A"
    			></iframe>
    		<!-- #videos--></div>
    
    	<!-- #content --></div>
    
    <!-- #columnWrapper --></div>
    Code (markup):
    EVERYTHING else belonging in the external stylesheet -- EVEN during development since you're pretty much just crapping on the code otherwise. The question then becomes what are you trying to do for style -- and I'm just not quite getting that...

    Unless you REALLY want that crappy 28% width on the float, in which case set float on the first column to appear in the code order, set overflow:hidden and a haslayout trigger on the second one. Trying to put "perfect width" and/or "opposing floats" is usually a waste of time and effort.

    Something like:

    .columnWrapper {
    	overflow:hidden; /* wrap floats */
    	zoom:1; /* trip haslayout, wrap floats legacy IE */
    }
    
    #imageDock {
    	float:right;
    	width:24em; /* adjust to needs of the content */
    }
    
    #imageDock a {
    	display:block;
    	text-align:center;
    	padding:0.8em;
    }
    
    #imageDock img {
    	display:block;
    	max-width:100%;
    	margin:0 auto 0.8em;
    }
    
    #content {
    	overflow:hidden; /* prevent float de-indent */
    	zoom:1; /* trip haslayout, prevent float de-indent legacy IE */
    	padding-left:8px;
    }
    Code (markup):
    It SOUNDS like a lot of what's biting you is called "margin collapse" where margins between elements can combine or just not work once floats or positioning are involved -- can get worse with floats as margins can also NOT collapse between floats while they still collapse for it's children. (that will drive you BATTY). In those cases the best plan of attack is usually to pad the parent instead of margin the child, or if you can get away with it use padding instead. That whole padding+width problem of that 70% + 8px disappears if you don't have to say width:70% on that column, which is why when possible leaving the bigger column fully dynamic instead of floated can be a really powerful solution to the problem.

    But really you should have semantic markup before even THINKING about applying CSS, and really unless that style is conveying meaning using the STYLE attribute is generally an indication you are doing things ALL WRONG. ...and if you are using the STYLE tag, you ARE doing things all wrong. As a tag it should have been made obsolete, as an attribute it should throw a warning in validation but not be considered invalid as there ARE valid usage scenarios. Sadly, 99.99% of the time when people use the STYLE attribute, they are not in said scenario.

    Dragging the markup and code style out of the 1990's can go a LONG ways towards making this stuff simpler; no matter how many HTML 5-tards, scripttards and so forth want to drag us kicking and screaming back there. Really if you can't build the simple semantic markup with as few hooks as needed and work from there, concepts like layout ARE going to fight you every inch of the way.

    It also means you can leverage inheritance properly, often meaning you only need to say things once in the stylesheet instead of every blasted time on every blasted element in the markup -- much less have different stylesheet targets; the principle reason that saying what things "look like" in the markup COMPLETELY MISSES THE POINT of even bothering to use CSS. At that point one might as well go back to HTML 3.2 and pretend CSS doesn't even exist.

    Sorry, ranting.... there's so much broken and bad methodology treated as acceptable and people making lame excuses to justify the lame practices it's hard not to.
     
    Last edited: Mar 20, 2015
    deathshadow, Mar 20, 2015 IP
    COBOLdinosaur likes this.
  3. Jeremy Benson

    Jeremy Benson Well-Known Member

    Messages:
    364
    Likes Received:
    4
    Best Answers:
    0
    Trophy Points:
    123
    #3
    lol, I've got pictures of girls in a job listing post. Makes it look like a horrible dating site, haha. Wages and education..

    Your layout is perfect, I just have to change education to education required.

    Sorry about the inline style. I always develop inline and then put the CSS in a separate file. I've heard about margin collapse in videos where margins on apposing sides don't account for each other and only one elements margin counts. I don't have a clue what this means in conjunction with float ad child margins.

    Your style is so frig'n simple though. The only thing your floated was the right column, left everything else where it was and just applied some width , padding, and display.

    I really have to start understanding how this is done better... at least I'm making progress... went from not being able to move things to at least getting them on the right side of the screen, lol. Now just to get them there right like this.

    Thanks for the lesson, great help as always.
     
    Jeremy Benson, Mar 20, 2015 IP
  4. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #4
    You notice how that works too? What I love is people's "staff" pages that are more ego stroking than useful to visitors, that generally end up looking like a high school yearbook! :D

    A lot of people work that way, and I don't quite understand it. It's just more work later to take it out, and quite often putting it in the markup at all means you aren't thinking "big picture" and end up putting values on every single element when you only need to say it once.

    The big trick for NOT using inline style IMHO is having the separate files open side-by-side in separate windows. That's why I consider most tabbed editors a step backwards in functionality and use editors that don't even TRY to do tabs like Flo's Notepad 2... or those that let you turn that nonsense off like Crimson Editor or even Win32pad. Which is pretty the history of editors I've liked.

    That's a fun one. Margin collapse is intentional so that you can say things like "p { margin:1em; }" and the top and bottom margins between P will overlap so there's only 1EM of gap. That SHOULD be pretty useful, but it can bite you in the ass with more complex layouts.

    If you have two floats next to each-other margins on those floats do NOT collapse, but -- and this is the sucktastic part -- margins on elements inside a float can (almost randomly) collapse into the margin on the parent float itself in some weird back-assward behavior. IT's such a pain in the backside I generally try to use padding instead of margin unless I REALLY have to just because padding is predictable and consistent.

    There's a laundry list of rules on how margins are supposed to work with floats, positioning, etc... honestly it just makes them harder to work with.

    Though a fun part of margins is when you give them negative values.

    When working with columnar layouts I always try to have one column remain auto-scaling in size instead of fixing it's width -- and I consider even % widths to be fixed, it's just a fixed percentage of the parent element or screen width. Trying to get the math perfect between things like padding, borders and margins will drive you NUTTERS when adding up percentages given how the box model works.

    Leaving that one element fully fluid in behavior (aka the default in every visual UA) simplifies life SO much. Instead of sitting there driving yourself nuts trying to add it all up, you can just set the side columns to however many elastic units it needs (hence my use of EM's) and then allow the largest column to auto-fill what's left over.

    In that way I consider fluid layout to be easier than fixed; you'll see it time and time again in tutorial after tutorial and book after book where people are adding stuff up exactly to the pixel - and that's MORE work doing something HTML and CSS can do for you.

    Gets even sadder when the "use jQueery" fools and framework numbnuts throw scripttardery at layouts just because the box model is "too hard" for them to master.

    Mind you, on a deployment website what I gave you is NOT how I'd code it since that smaller column likely is NOT the content for the page. There's an approach called "content first" columns (some call it "holy grail" if you can do it without one extra DIV, oh noes, not a DIV!?! Suck it up, use the DIV, it's more reliable) that goes with that "logical document order" thing I'm always ranting about.

    Usually stuff in the sidebar is, well... less important. It's not what the user is actually on the page for -- that's the big columns job. As such when your visual layout is inapplicable (screen reader, braille reader, search engines, CSS blocked) it would be preferable that the actual content goes before the sidebar in the HTML source.

    The big trick to that? Those negative margins I mentioned.

    The way I like to think of it is that there are actually two separate boxes the browsers keep track of; the "flow box" which is how the element is positioned in flow with other elements, aka how other elements react to it's presence as well as how it reacts to others. Then there's the "render box" which determines how the element is drawn. While this is a gross oversimplification, you can observe it in practice using negative margins or relative positioning.

    Using relPo it's easy to see.

    <div class="test"><div></div></div>
    Code (markup):
    .test {
    	background:#F00;
    }
    .test div {
    	position:relative;
    	width:50px;
    	height:50px;
    	top:25px;
    	left:25px;
    	background:#0F0;
    }
    Code (markup):
    The parent red DIV acts as if the inner green DIV is still in it's original location at it's original size, despite that green one being drawn offset. That's an aspect of relative positioning a LOT of developers never quite grasp.

    Negative margins, well... they do something funky. They shrink the flow box's size without changing the size of the render box. If we change ".test div" thus:

    .test div {
    	position:relative;
    	width:50px;
    	height:50px;
    	top:25px;
    	left:25px;
    	margin-right:-25px;
    	background:#0F0;
    }
    Code (markup):
    The parent red box gets narrower becuase it thinks the inner green div is now smaller. We've "shrunk" it's size in flow.

    ... and that's the big secret magic in "content first floats".

    The markup for that would be something like this:
    <div class="contentWrapper"><div id="content">
    
    	<h2>Listing</h2>
    	<p>This is the post</p>
    
    	<h2>Education</h2>
    	<p>This is cool.</p>
    
    	<h2>Wages</h2>
    	<p>This is cool.</p>
    
    	<div id="videos">
    		<h2>Videos</h2>
    		 <iframe
    			width="280" height="157"
    			src="https://www.youtube.com/embed/0oFtYrgh70A"
    		></iframe>
    		<iframe
    			width="280" height="157"
    			src="https://www.youtube.com/embed/0oFtYrgh70A"
    		></iframe>
    		<iframe
    			width="280" height="157"
    			src="https://www.youtube.com/embed/0oFtYrgh70A"
    		></iframe>
    	<!-- #videos--></div>
    
    <!-- #content, .contentWrapper --></div></div>
    
    
    <div id="imageDock">
    
    	<h2>Images</h2>
    
    	<a href="guest/images/girlbig1.jpg">
    		<img
    			src="guest/images/girlbig1@thumb.jpg"
    			alt="DESCRIBE THIS!!!"
    		/>
    		Enlarge
    	</a><br />
    
    	<a href="guest/images/girlbig2.jpg">
    		<img
    			src="guest/images/girlbig2@thumb.jpg"
    			alt="DESCRIBE THIS!!!"
    		/>
    		Enlarge
    	</a><br />
    
    	<a href="guest/images/girlbig3.jpg">
    		<img
    			src="guest/images/girlbig3@thumb.jpg"
    			alt="DESCRIBE THIS!!!"
    		/>
    		Enlarge
    	</a><br />
    
    	<a href="guest/images/girlbig4.jpg">
    		<img
    			src="guest/images/girlbig4@thumb.jpg"
    			alt="DESCRIBE THIS!!!"
    		/>
    		Enlarge
    	</a>
    
    <!-- #imageDock --></div>
    
    <!-- I'd suggest that anything after this, like the footer, have clear:both on it! -->
    Code (markup):
    If we make that .contentWrapper width:100% and floated left:
    .contentWrapper {
    	float:left;
    	width:100%;
    }
    Code (markup):
    Beign 100% width, there's 0 pixels free for anything to float next to it... Remember that.

    #content {
    	margin-right:24em; /* == width of side column */
    }
    Code (markup):
    pushing the inner DIV over with margin (or padding) leaves a blank spot where the column can go.

    #imageDock {
    	float:right;
    	width:24em; /* adjust to needs of the content */
    	margin-left:-24em;
    }
    Code (markup):
    ... and here's the magic. Know how I just said there's 0px free? Well if you set the left margin a negative value equal to it's width, the render box will slide left but the flow box will be reduced to zero width... and since it's now 0 width in 'flow' it can now fit, so it pops up into place rendering OVER .contentWrapper.

    You can add a third column on the other side using this technique by making it margin-right instead of left and then adding position:relative and left:-100%; That might sound crazy, but it too works.

    #otherColumn {
    	float:right;
    	width:24em;
    	margin-right:-24em;
    	position:relative;
    	left:-100%;
    }
    Code (markup):
    I've actually done layouts that have:

    <div class="contentWrapper"><div id="content">
    	<p>Some Content Here</p>
    <!-- #content, .contentWrapper --></div></div>
    
    <div id="extras">
    	<div class="firstSection">
    		<p>First Sidebar Section</p>
    	<!-- .firstSection --></div>
    	<div class="secondSection>
    		<p>Second Sidebar Section</p>
    	<!-- .secondSection --></div>
    <!-- #extras --></div>
    Code (markup):
    That with responsive design/media queries lets you have a three column layout (#content, .firstSection and .secondSection) when the screen is really big, two column layout (#content, #extras) at intermediate sizes, content as screen width over two columns (.firstSection and .secondSection) at smaller sizes, and then linear-order as a single column at really narrow sizes... all using this technique and just changing out what's being floated, what isn't, and what's getting what margin trickery.

    Once you know these techniques and are comfortable with them, 99%+ of what you want to or should be doing for layouts is possible and not THAT hard to implement.
     
    deathshadow, Mar 21, 2015 IP