I've worked with CSS enough that I can get columns to work alongside content if I have a set number of columns: I simply define the sidebar(s) in the HTML prior to the content, and specify that they float to the left or right, while giving the content a margin-left or -right such that it doesn't flow into the space below the end of the sidebar.
I have a new challenge though, whereby the number of columns may vary between pages. In my HTML, I don't want to specify the sidebar content prior to the main page content though, which is the only way I know how to do it.
Essentially, I want the HTML to look like this:
<div id="container">
<div id="content">
<!-- Main body content goes here. -->
</div>
<div class="sidebar">
<!-- Sidebar DIV should appear to the right of the content DIV. -->
</div>
<div class="sidebar">
<!--
Another sidebar DIV, with this one *preferably* appearing to the
right of the one above, since it appears lower in the code and is
assuming LTR. I'm open to CSS that makes this sidebar appear to
the left instead of the right, however.
-->
</div>
<!-- Any number of additional sidebar DIV's can appear here. -->
</div>
I'm not sure if I should be trying to float the content/sidebar DIV's, make them position absolute, specify the width, etc. to make the content stretch automatically with the variable number of sidebars. It's probably worth noting that the size of each sidebar will be constant.
div.sidebar {
width: 100px;
}
On final note: if there's an improvement I can make to the HTML that will help, (e.g.: surrounding all the sidebar DIV elements in a parent DIV such as <div id="sidebars">), I'm open to suggestions there as well.
I guess I'll have to accept the fact that this requires HTML tables since no one can offer a CSS solution for this.
Related
I can see quite a lot of articles online about how to create sticky headers (ie. when the user scrolls the page, the header stays in place at the top of the window). However they all seem to imply that the header should be of a fixed height?
This is unacceptable for me. For a very simple example, on certain dates like July 4 I might want to put a USA flag in the header - which will slightly increase the height.
So how can I make a header, say all contained within a <div class="header"> ... </div> area, sticky - regardless of the height of the div?
Sorry to be late to the party, but this can be done without any Javascript at all. This may be aesthetically unpleasing, an offense against god and man, but it does work! The trick is to put precisely the same content in two div's:
<div id="fbanner">Here's your banner content</div>
<div id="banner">Here's your banner content</div>
<div id="restofpage">Here's the stuff on the rest of your page</div>
Then provide some CSS:
#fbanner {
position: fixed;
width: 100%;
}
#banner {
visibility: hidden;
}
So, no matter what the content is, even if it's text that line-wraps in a narrow viewport, both div's will be the same height, and the hidden one will take up the space needed to keep the rest of the page content from disappearing under the banner until you scroll.
You might find that you have to do some tinkering with margins, but that's a small price to pay if you want to avoid yet another jQuery "solution."
You have to use jquery for this. jquery get the height of the header dynamically and put the padding top on bellow the heard div.
For example
HTML
<html>
<head>test</head>
<body>
<header>
<div class="example"> Test</div>
</header>
<div class="sample-content">
Test Content Test Content Test Content Test Content Test Content
</div>
CSS
header{width:100%; position:fixed;}
JQUERY
<script>
$(window).load(function(){
// this gets dynamic height of your header
var sticky_header = $('header').height();
// apply tha dynamic height to your div after header for margin-top so it not covered by sticky header
$('.sample-content').css('margin-top', sticky_header + 'px' );
});
</script>
I have a header that is not a fixed pixel height - depending on what the other department decides to put in the banner in the content management system, the height of the header will change.
So I did just as #MisterNeutron answer suggested and created a 2nd header (invisible) but my header is pretty Massive, so instead of duplicating the html I just clone the header DOM element with Javascript.
var visibleHeader = document.querySelector('.fixed-top').cloneNode(true);
var invisibleHeader = document.querySelector('.fixed-top');
invisibleHeader.style.visibility = 'hidden';//take up space, but be hidden.
invisibleHeader.style.position = 'relative';//un-fix
document.querySelector('body').insertBefore(visibleHeader, invisibleHeader);
The header it's self is directly inside the body so the html ends up looking like this:
<body>
<div class="fixed-top">
... rest of header html ...
</div>
<div class="fixed-top" style="visibility: hidden; position: relative;">
... rest of header html ...
</div>
... rest of page goes here ...
</body>
Note that if you have any elements with Id's in the header, this will create 2 of the element with same ID, but if you make sure the Real header is Above, I believe when you query for it, it will always grab the one you want.
I got a PSD design where the grid looks like this -
Grid image the image only shows parts of the PSD because I dont own the rights to publish it in public. But as you can see the grid (blue stripes) does not go from side to side as the boostrap-grid. It starts 120px in and finish 120px before the screen (talking about the total 12 columns, not each column)
I am using bootstrap while coding up this PSD, and bootstraps grid goes from one side to the other.
My question: How can I change the bootstrap-grid (center it/add margins) so it looks the same as the grid in the psd i.e starts 120px in on the screen and finish 120px before the screen ends?
I dont need to have any content outside the grid as it is in the PSD. So I would need to rows to go from side to side but the columns to start a bit in, and finish a bit before the screen does. I can not use the bootstrap container instead of container-fluid since it will also take the rows. I can also not use offset since I then will "lose" some of the columns and no longer have 12-column available per row.
My HTML file contains of a standard fluid grid
<div class="container-fluid>
<div class="row">
<!-- A few columns in different sizes -->
</div>
<div class="row">
<!-- A few columns in different sizes -->
</div>
<div class="row">
<!-- A few columns in different sizes -->
</div>
</div>
Add the following to your css
.row{padding: 0 120px;}
I'm not sure if i totally understand your question, but you can try the following:
Add a container (Bootstrap container)
Add margin with css: .col-sm-4 {margin:Your margin here;}
It really depends on what other content will be inside the rows? If the columns don't need to go from side to side, why not just use Bootstrap .container? You can still have full width content outside of the container..
http://codeply.com/go/HwIDGQpdbO
I am trying to setup a website that consists of two main areas: navigation and content. The navigation portion needs to take up the full height of the left column. The main content will be in the left column. In an attempt to set this up, I'm using the following CSS:
<div class="full-height row">
<div id="navDiv" class="four wide column full-height" style="background-color:#40546C;">
<!-- Nav COntent goes here -->
</div>
<div class="eight wide column">
Main Content
</div>
</div>
I've created a fiddle with the full example here. What I'm trying to do in the nav column is three things: show a title, have tabs aligned against the bottom of the screen, and have the tab content take up the remaining space. Unfortunately, I'm not having much luck in getting this working. Specifically, I'm having problems getting the tab content to fill up the remaining space and the tabs aligned against the bottom of the screen.
Your help is much appreciated!
For future reference, you should try to mention that you were using an external grid system. It took me a couple minutes to realize what was happening and why there were so many classes on things. Not a big deal though :-)
I think this new fiddle should be pretty close to what you're talking about, though:
theFiddle
I first had to set the height of the body and html to 100% so that their children could be 100% as well. I then floated the navDiv left and gave it a width of 25%. You can tweak that width as needed.
#navDiv {
width: 25%;
float: left;
position:relative;
}
I then used absolute positioning to get the tabs at the bottom, and to get the tab content above the tabs.
I added new classes in several places to avoid collisions with the grid library. I also had to use an important to override the margins on the segment class, since I didn't want to remove anything that you were using in your grid.
There may be a way to to this layout using that grid more effectively. As I said, I'm not familiar with it so I just used plain CSS.
Just as an aside, this is one my favorite resources for brushing up on CSS Layout. Thought you might find it helpful:
http://learnlayout.com/
I'm sure this is some stupid CSS mistake, but in this template website I'm making, whenever I put more than one line of text in the content div, it misplaces the two background divs on either side of it. Here is the HTML and CSS:
http://pastebin.com/txmQzbx3
I have tried everything I can think of, but I don't know what could be wrong with it.
First, there's no such thing as float:center. If you remove that and change the position value for your content div from relative to absolute, then it works.
http://pastebin.com/B9tXgXYj
If you want to keep it fixed width then just add float: left to the content css
If you want to have it fluid then you'll want to take a look at using the display: table|table-row|table-cell css properties to do it
Try placing your backgroundright div above content div,
<div id="backgroundright">
</div>
<div id="content">
<p></p>
</div>
Hope this helps
I am not very good with CSS, HTML and mark-up, but after having read many and many CSS articles, I just have no idea how to get the div-elements on the right place.
Current site in tables: http://daweb.nl/
Current attempt in div: http://daweb.nl/daweb/
I would like to have the right-menu and content in the right place. If you have general comments regarding the current state of my HTML and CSS, please feel free. I have worked with CSS, HTML much, but never built a site from scratch with div-elements.
http://jsfiddle.net/qJBpk/10/
Check the preview here.
This is a basic setup, you have a wrapper div which contain all your structure: a header, three columns and a footer.
Wrapper div has margin set to auto, this will allow it to be horizontally center placed (along with all its content) in the browser window.
The three columns have the float property set to left, so that each one is placed next to the other.
The footer has a clear property set to both, this will allow it to be placed after the most tall floated column, to avoid a layout crash.
Div elements are block level elements. This means, among other things, they take up all the avaiable width space, so no need to set a width for the #header and #footer divs.
EDIT
To avoid cross browser incompatibilities and issues, it's better to have a CSS reset (a set of CSS rules which will make all elements shows as much as possible the same across all browsers), like the YUI. Place it first before any other CSS code.
This is a good place to start learning about css positioning.
Also, after looking at your code, you may want to wrap certain elements in a wrapper div so you can position everything inside it with one CSS rule.
Instead of:
<div id="menu-header">
<h1>HEADER</h1>
</div>
<div id="menu-body">
<p>MENU BODY</p>
</div>
Try something like:
<div id="menu">
<div id="menu-header">
<h1>HEADER</h1>
</div>
<div id="menu-body">
<p>MENU BODY</p>
</div>
</div>
That way if you want to move the menu and everything in it you can write a CSS rule like this:
#menu {float:left;margin:15px 0 0 25px;}
just another one! ;-)
full-working-demo: http://so.devilmaycode.it/converting-tables-to-css-layers
hope this help!
Looks like a simple 3 div layout. You need to create 3 divs. One for the left, middle, and right-hand content. These three divs will be placed in a wrapper div.
So take your left_menu, content, and right_menu divs, give them a width and set them to float: left; so they will all be placed beside each other. Place them inside a wrapper div that is larger than all three. You're done!