I'm working on a responsive layout that is basically boxed on the right side so the banner area runs flush with the sidebar/aside for desktop and wide views.
I can't seem to get it flush on the right side without making the width of the container fixed width, which means even a 1px difference in browser width makes it hang over or not span far enough.
Any suggestions? I have a jsfiddle with my markup here: http://jsfiddle.net/MtQ5J/
Here is the specific html markup:
<div class="hero-container">
<div class="hero wrapper clearfix">
<h2>
We thrive on solving other people’s problems in a collaborative setting.<br />
This means starting by understanding the client’s needs and goals.<br />
Listening to and understanding our clients is the key to how we work.
</h2>
</div>
</div>
It's H5BP, Normalize, and mobile first.
Example screenshot:
UPDATE
I added a container around the header, closed it before the hero area, then re-opened for the main content. I then floated a empty div next to the hero # 20% width, set the hero to 80% width.. this kind of works but I would have to MQ it to death to get it perfect.. still looking for a more "fluid" solution if possible!
jsfiddle updated
Add this rule to your CSS:
body{
margin:0;
padding:0;
}
JSFiddle Demo
JSFiddle Code
Is this any help to you?
http://jsfiddle.net/panchroma/5kpkc/
The only change I've made is that I've added
.main.wrapper{
float:right;
}
to the CSS so that the wrapper class floats to the right instead of being centred on the page.
You might need to refine this some more with media queries if you want more control over the layout of the aside as the viewport narrows
Good luck!
Related
I have this CSS: https://cal-linux.com/styles/tutorial.css
And a sample page that uses it: https://cal-linux.com/tutorials/gswc++.html
When I display this on a smartphone (or when I check it through Google's Mobile friendliness verify service), the layout looks huge (badly cropped, instead of reduced to fit the smartphone's screen.
I only use proportional measures (for example, outsidecontainer's div has width 80%, inside right-most column has min-width 25%). I'm placing Google Ads in there, but it's a "Responsive" add, which is supposed to adapt to the page's available size and layout.
Any tips on this? I figured posting the actual links to the pages might be ideal; but please let me know if a "minimal" instance of code that reproduces the problem would be preferred.
Thanks,
Cal-linux
There are a few things I note here:
You use display:table-row and display:table-cell a bit too much. Those don't respond as well to the resizing especially if you have not specified the width of each item. Instead either use floats with a clear:both on the container's :after pseudo-element or inline-block. Either way you should define percent widths for the containers.
Your css has a lot of white-space:nowrap but doesn't use overflow:auto which forces the element to not resize the content and just stretch its parent container.
Aside from that a few places I see a fixed px width which makes it more difficult to resize. It doesn't seem to be your ads. Although google's script does throw an error about trying to put an ad in an 86px x undefined space. You can set a fixed height or at least a min-height to give the script an idea of how big an ad should be placed there.
The easiest solution is to incorporate bootstrap to do the heavy lifting of setting up a grid for what you want.
You can basically do your two column style like so:
<div class="container-fluid">
<div class="left-col col-md-11">
<!--- ALL YOUR CONTENT HERE //-->
</div>
<div class="right-col col-md-1">
<!---Google Ads go Here //-->
</div>
</div>
If you want to stick with your own style, by using the code inspector in chrome I was able to get to the following result when resized:
I made the tablerow class be a standard display:block
The first column was set to width:75%; display:inline-block;
The second column was set to width:25%; display:inline-block;
The autosize elements changed to display:block;max-width:100%; overflow:auto;width:auto;padding:0
The div.code blocks were changed to display:block;white-space:nowrap;width:auto;
Everything else stays the same pretty much. That should fix it, however you should note that frameworks like bootstrap help out with mobile sites by making the page columns collapse and go one ontop of another for mobile browsers so that they get maximum space.
*This is just a general question prior to the development, hence no code provided.
I want a div in the middle of my site to have a background width of 100% in order to go all the way across the screen, but this div is INSIDE the wrapper/container (of which has a 980px width) so it's restricted as normal to the regular content width.
How can this happen without ending wrapper and container, creating the full width div, then making a new set of wrapper/container divs? As w3 validator states to me I should have these particular div's more than once.
Im not sure exactly what you want without examples, but you may want to try something like this:
<style>
#width980{width:980px;height:200px;margin:0 auto;background:#aaa;}
#fullwidth{height:100px;background:#000;position:absolute;left:0;top:50px;right:0;color:#fff;}
</style>
<div id="width980">
width980
<div id="fullwidth">
fullwidth
</div>
</div>
Here, I made you a fiddle: http://jsfiddle.net/Wde8W/
I am trying to build up a website with a Navigation bar on top of the page. It should be fixed on top of the browser when we scroll the page (like facebook or twitter), but not scroll with the page(like google search??). see Fig like:
seems like we should set the css attribute position of this navigation bar like
#nav_bar {
postion:fixed;
}
but why all those websites use a whole bunch of div to do this? Does all these divs make any sence? Like twitter:
where topbar js-topbar is the outmost div which size is 1583*40px, but I didnt find the definition of its size. And then it goes to global-nav->global-nav-inner->container, finally...container, which is acutually hold the navgation items like a list, a search bar so on and so forth. something Weired is that the size of it is 865*0px. For more information, you can view source of the home page of twitter.
And my question is : but why all those websites use a whole bunch of div to do this? Does all these divs make any sence? Why is a div which height is 0px can hold those navigation items?
why the 'many' divs?
The general idea is the more wrapping elements you have the more flexibility you have with regards to what you can achieve in styling with css. Obviously there is a limit, as you should also try to keep your markup readable and semantic. I would say many important or segregated regions in a site would benefit from three wrapping elements:
<div class="positioner">
<div class="padder">
<div class="alignment">
Menu Here
</div>
</div>
</div>
Obviously with the more semantic HTML5 elements you can make this more readable:
<header class="positioner">
<div class="padding>
<nav class="alignment">
Menu Here
</nav>
</div>
</header>
The reason for keeping a seperate element for padding is so that you can set specific dimensions to your positioner (i.e. header) and not have that calculation messed up on certain browsers (with old box modles) by the addition of padding.
The reason for keeping alignment seperate is because it will give you greater flexibility on the alignment tricks you can use.
The reason for using the header element is because this content will act as a header imo.
The example you give above, each element will most definitely have it's reason for existing and they will most probably all be used to achieve the layout the designer wanted with regard to css. Some times extra wrapping divs are also used as placeholders for content that may be AJAXed, this is probably quite likely when dealing with the likes of Twitter.
You can of course get away with using only a single wrapping element, but you will be limiting what styling and positioning you can achieve later on down the line.
why the height 0px?
There is a trick often used with positioning absolute layers in a relative location (rather than an absolute location) - and I believe this is the reason why you are seeing this, but the trick in itself isn't the actual cause of the height:0px. The trick uses the following construction:
<div style="position: relative;">
<div style="position: absolute;">
The content here will float outside of the document flow,
but remain in the correct location within the document flow
- in all viable browsers.
</div>
</div>
If you inspect the above construction, using any browser debug method, you will notice that the position: absolute; layer has collapsed to have no height (in modern browsers). This is the default behaviour of position absolute outside of the old Internet Explorer world (with no other positioning or dimensions settings), because an absolutely position element is taken out of the document flow and by default doesn't calculate anything to do with it's children.
If you wish to override this behaviour you can simply use overflow:hidden; (as long as the height has NOT been specifically set to 0px by some other class or by JavaScript) - this will force the element to calculate the dimensions of it's children and wrap them.
First of all use position:absolute; if you don't want it move with you when scrolling. position:fixed; if you do.
Second of all when you build a website the first thing you're going to have to do is decide how the structure of your website is going to look like. So the menu at the top will be
<div id="Menu"> </div>
Now you may want to create a header under it
<div id="Header"> </div>
Under that you want to share content, since thats what website do.
<div id="Content"> </div>
Under that you may want a footer, that says 2012 Copyright etc.
<div id="Footer">2012 Copyright zoujyjs © </div>
Now you may want to center everything. Why not just put all these previous divs inside a wrapper div. Then all we have to do is center the wrapper div.
<div id="Wrapper">
<div id="Menu"> </div>
<div id="Header"> </div>
<div id="Content"> </div>
<div id="Footer"> </div>
</div>
You could also add stuff like a logo inside the header, etc.
I think you get the idea. But isn't it obvious you're going to get "divception" then?
Also: When no height is specified on a div, the div will automatically resize with the content within.
<div style="background-color:black;">
<!-- Nothing will be seen on your page, because the div is 0 height, 0 width by default -->
</div>
<div style="background-color:black;">
Height of the div will now be the same height as the height of this line. (15 px by default I believe
</div>
I was hoping someone can take a look at my site and tell me what may be going on here. The problem I'm having is that the #bodyWrap div is not automatically stretching to the height of one of it's children, #contentWrap. #contentWrap stretches fine to fill all the content on that page, but this does not bubble up to the parent, #bodyWrap. Thanks in advance for any insight.
http://www.jacobsmits.com/placeholderRX/index.html
You must add a clearer div before your closing containers:
<div style="clear:both;"></div>
Floating items won't affect the height of the container...coz it is floating ;).
Working Live Example : http://jsfiddle.net/LBH5h/
Example :
<div id="content">
<!-- floating child --> <div style="float:left;"><!-- floating child content --></div>
<div style="clear:both;"></div>
</div>
If something usually won't auto adjust the height for me then I will troubleshoot with these steps.
Set the height to something ridiculous (1000px)
If that make a difference then check all floats
Add a clear:both; statement.
If it's still not working, add separate border colors to all of your divs. It should help you out to see whats setting the height properly and whats messing up the website.
I'm coding my first liquid layout and I have to say it's a lot more time-intensive than a fixed width layout. However, I see the advantages and so I'd like to make it work!
Here's my situation:
I have a header with some text in that makes the header of variable height depending on the browser text size.
I have a fixed-width nav on the left. The nav is floated left and has a negative margin the same number of pixels as the width which effectively makes it slot into a zero-width space. Neat!
I have my main content section which is floated right. It has a left margin the width of the nav so the content avoids hiding underneath the links of the nav.
The nav comes second in the source so the users of assistive tech get to the content first.
This works great but only if the content of the main content section has lines of text that wrap around the full width of the page. If the content in only short lines or a list the content section's width is the same as the content within it. As the content section is floated right it means the content looks wrong in these situations. Obviously the page width is variable and so for larger monitors this problem is more common.
I'm looking for a way of showing the content section filling the page at all times so that the content will sit on the left and fill out to the right even when the lines are short. I've tried absolute positioning but that messes up the footer which stays in the right place by clearing the floated nav and content section.
Any suggestions would be really useful!
Edit:
As requested I've provided some demo pages.
Here is a page which has wide content and looks OK: http://www.qkschool.org.uk/static/redesign/widepage.html
And here is a page with thin content which is all right-aligned because of the float: http://www.qkschool.org.uk/static/redesign/thinpage.html
Many thanks!
This has always been a favorite source of mine for liquid layouts:
http://matthewjamestaylor.com/blog/perfect-3-column.htm
(Make sure to click around for all the different variations)
I'm not saying you should abandon learning yourself, but I think it's worth a look at some of the tricks used in those layouts. All of them work great in IE6 and IE7 as well, and use good content-first source order. They can be easily turned into fixed-width if needed. I honestly have never found another layout that I like as much as the ones posted on this website.
One variation I use with these layouts is wrapping every column with an extra inner div, and setting the margin or padding on this div and nothing else, this will make the width and positioning calculations a lot simpler (you'll see if you check it out). I also wrap the entire thing in a div for easier max-width and centering.
Good luck and let me know if you need any advice with this technique, I've been using it for years and it has served me well.
Here is summary of my own layout technique which is in use on many sites, it can take any number of columns, but this sample just copes with your left one :
JSFiddle example
the sample shows the footer will always remain below longest column
the sidebar can be any width just change the margin of the content to suit, you can even float two sidebars to the left - then just increase the margin on the #content to clear them.
Alternatively (or as well) the sidebar (or 2) can be floated right, then you just margin the #content div on right instead of the left to "clear" them
This is source ordered, content before sidebars.. it can incorporate any number of headers subheadings and footers (or under content) without affecting the main "columns" area, and you can float your sidebars (if more than one), in any order too.. thus changing their order, width, number even after the fact, via CSS alone
I think my layout technique may have even been incorporated into some Drupal themes and is in use, it's certainly been used on some larger sites too, but I lost track.. it's never let me down anyway :)
here's the template code..
CSS:
html, body {padding: 0; margin: 0;}
#footer,#header {background: #444; color: #fff; clear: both;}
#container { /* always the same don't add anything here */
overflow: hidden;
width: 100%;
}
#contentwrap {/* always the same do not add anything else here */
float: left;
width: 100%;
margin-right: -100%;
}
#content {
margin-left: 270px; /* same as width plus padding of the sidebar(s) and in the same direction(s) */
padding: 20px;
border-left: 1px solid #444;
}
#sidebar {
float: left;
width: 230px;
padding: 20px;
background: #dad;
border-right: 1px solid #444;
}
HTML:
<div id="header">header</div>
<div id="container">
<div id="contentwrap">
<div id="content">
<h1>Content remaining width</h1>
<p>add more content here</p>
<h2>Header Level 2</h2>
</div><!-- content -->
</div><!-- contentwrap -->
<div id="sidebar">
<p>short sidebar</p>
<p>add more content here until this gets longer than main and the footer will still stay below</p>
</div>
</div>
<div id="footer">footer</div>
This really is very flexible as sidebars can be fixed width or fluid too, and it will work with ems , %, px.. you name it
yes I'm attached to this code ;)
Edited to add
If older IE's (6 did) do give trouble with floats/hovers inside the content area, the #content div may need haslayout set, if so just add zoom: 1; to it in fact in my layouts I still do out of habit!
If you think in terms of physics, even liquids have boundaries. When it expands too much it becomes gas. When it contracts too much it becomes solid. In web design, boundaries are important as well. I suggest researching into Elastic design (translates loosely to design that is flexible within specific parameters).
Here are some links to get you started:
A List Apart: Elastic Design
CSS Layouts: The Fixed. The Fluid. The Elastic
Fixed vs. Fluid vs. Elastic Layout: What’s The Right One For You?
It´s hard to tell without seeing the design, but 100% heights and widths can be faked styling the parent element (for example using a background on the body or a wrapper div).
If your last point is not crucial (I guess it is because you mentioned it...) you can also switch the order of your floats and remove the float from the content.
You could try using the Fluid 960 grid system - get it working, and then remove/rename classes to make it a bit more semantic.