Complex HTML/CSS Sticky Double Sidebar Layout - html

I've been staring at this wireframe I've made and it has me stumped on how to make it...
http://i.stack.imgur.com/ytiMf.png
The sticky jquery properties are not the problem, it's the positioning of the areas themselves given their overlapping nature that's giving me strife.
Any suggestions? Am I thinking about this the wrong way?

Like this: http://jsfiddle.net/7Fv64/
<div class="green">Hi</div>
<div class="content-wrap">
<div class="sidebar">
<div class="yellow">Hello</div>
</div>
<div class="content">
<div class="red">Stuff</div>
<div class="purple">And</div>
<div class="black">Things</div>
</div>
</div>

Related

Landing Page - Overlapping of divisions in mobile. Fine in Web

Am beginner in coding. I have designed a landing page. The landing page looks fine in website but divisions are overlapping in mobile. Kindly check and advice how to resolve this problem?
Landing Page Link
Thanks in advance
You have an inline height of 3px on your ul id="grids".
Remove that or set it to auto and its should stack properly.
you are using bootstrap the columns must wrap with row class and row should be warped in container or container-fluid classses
<div class="container">
<div class="row">
<div class="col-md-12"></div>
</div>
</div>
OR
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="row">
<div class="col-md-4"></div>
<div class="col-md-8"></div>
</div>
</div>
</div>
</div>
change bootstrap nav use this one [http://getbootstrap.com/examples/navbar/ ] it's batter to responsive and mobile devices .

Looking for a better way to achieve this fixed scroll experiment

<section class="section">
<div class="section__clip">
<div class="section__content">
Link
</div>
</div>
</section>
Experiment: http://codepen.io/AgustinLarzabal/pen/OpNLvR
What i'm trying to achieve is to replicate this scrolling effect, but without repeating the content in each .section
Anyone can help me?

Is having multiple rows and columns inside one another an okay practice in bootstrap

Currently I am structuring the HTMl on my page as follows:
<div class="row">
<div class="col-xs-12">
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<div class="container-2">
<div class="content"></div>
</div>
</div>
</div>
</div>
</div>
</div>
There are 6 divs outside of the actual content on each section. The outer column is to be a container of a certain colour, and the inner container is only fill up 8/12 of the outer container. This produces margins with the background colour of the outer container of width 2 on either side of the inner column.
This looks great and is responsive. However, I'm wondering if having this many divs is good practice or not?
Well, I guess it's up to you. If you feel like you can manage this many div's then it's fine. But what you have to think about is, if you for instance would pass on your project to another developer, then he would need to understand your work without cleaning up before he even starts, so it's always important to have that in mind when you develop.
I would maybe construct it this way:
<div class="container">
<div class="row">
<div class="col-xs-12">
</div>
</div>
<div class="row">
<div class="col-md-8 col-md-offset-2">
<div class="content"></div>
</div>
</div>
</div>
This is just what I wan't to do, maybe someone else would do it another way.

Elements not lining up until after turning CSS rule off and on again

I have a layout built using CSS display:table (inline, row, cell, etc). I'm doing local development on it with apache, and when I refresh the page, two of the div containers are incorrectly lined up. However, if I uncheck and re-check display:table-row, they correct themselves, and the page displays correctly.
http://jsfiddle.net/fNNKT/
You can see the HTML and CSS at the jsFiddle above. It's actually not working there either, so maybe I'm doing something wrong, and can use help with that.
<div class="cabinet-container">
<div class="mode-bar">
<div class="mode-bar-left">
<div class="mode-bar-item">logo</div>
<div class="mode-bar-item active">Dispense</div>
<div class="mode-bar-item">Inventory</div>
</div>
<div class="mode-bar-right schedule">
<div class="mode-bar-item">Sign-Out</div>
</div>
</div>
<div class="table"></div>
<div class="left-container"></div>
<div class="center-container">
<div class="search-container">
<div class="table-cell">
<div class="search-field"></div>
</div>
</div>
<div class="nav-button-center-container">
<div class="table-cell">
</div>
</div>
<div class="list">
<div class="table-cell">
<div class="list-item-center-container"></div>
<div class="list-item-center-container"></div>
<div class="list-item-center-container-partial"></div>
</div>
</div>
<div class="nav-button-center-container-down-active">
<div class="table-cell"></div>
</div>
</div>
<div class="footer">
<div class="button-group table-border-5">
<div class="button-secondary">Dispense Non-Drug</div>
<div class="button-secondary">Sort By: Last Name</div>
</div>
<div class="button-group-right table-border-5">
<div class="button-primary">New Clinical Order</div>
</div>
</div>
</div>​
Is your question related to .mode-bar-left and .mode-bar-right wrapping onto two lines? If so, the problem relates to whitespace. Think of two images displayed inline, side by side. If there's whitespace between the tags in the code, there will be whitespace displayed in the browser.
Solution #1:
Take your logic one level higher up in the DOM. Change the display value for both mode-bar elements to table-cell (instead of the current inline-table). Then change the .mode-bar-item elements to display: inline-block (instead of table-cell).
Solution #2:
A faster, less elegant solution is to add float: left to .mode-bar-left.
On the topic of elegance, I strongly recommend that you consider some more semantically meaningful tags than just div. For example, .mode-bar-left is clearly a list (ul perhaps?) and the .mode-bar-item elements are clearly list items (li).
Are you using any javascript/jQuery? On a recent project of my own, I was having a similar issue and all I had to do was move my custom lightbox script from the to right before the tag, and it seemed to fix the issue. Sometimes javascript can be wonky like that. I don't understand why, but that's the way it is.

html creating a dashboard for mobile

I have to create the following html, tried to use a div for the "last 24 hours" and "last month" and other divs with float left for other stuff, but it turned out all messed up.
please help me, what structure should use? table? divs? thks
This begs to be a grid. I'd use divs with some ready made grid, like the one from Bootstrap.
So for example it could look like this:
<div class="container">
<div class="row">
<div class="span6">LAST 24 HOURS</div>
<div class="span6">LAST MONTH</div>
</div>
<div class="row">
<div class="span6">283</div>
<div class="span6">put a nested grid here</div>
</div>
<div class="row">
<div class="span3">Facebook<div class="value">10%</div></div>
<div class="span3">Twitter<div class="value">9%</div></div>
<div class="span3">Foursquare<div class="value">7%</div></div>
<div class="span3">Others<div class="value">5%</div></div>
</div>
</div>
Then add some css classes and use that to float, change font sizes, colors, etc.