I've been fiddling with asp.net mvc 3 with the new razor view engine.
My goal is to have a fixed-fluid 2 column layout with a jqGrid in each column. I'm having no luck though! As soon as I add a grid to the right column its header goes huge. I don't think its jqGrids fault because if i remove the styles both grids display as expected.
I see that the css for the jqGrid applies display: block to the header as part of the ui-helper-clearfix class.
Anyone have any suggestions to get this to work or other fixed-fluid css i could experiment with (I've tried a bunch of templates from online with no luck)?
Code from the template file:
... <style type="text/css">
#left { float: left; width: 400px;}
#content { margin-left: 400px;}
</style>
</head>
<body>
<div>
<div id="left">
#RenderSection("SPTreeGrid")
</div>
<div id="content">
#RenderSection("ClientPickerGrid")
</div>
</div>
</body>
Update:
My page actually needed to display 2 grids in fixed width on the left and a fluid one on the right.
It was an issue with my css (I still dont know why) but I ended up using the following layout which works (rail is the left column):
#container{
overflow:hidden;
padding-left:400px; /* The width of the rail */
}
* html #container{
height:1%; /* So IE plays nice */
}
#content
{
width:100%;
border-left:400px; /* The width and color of the rail */
margin-left:-400px;
float:right;
}
#rail{
width:400px;
float:left;
margin-left:-400px;
display:inline; /* So IE plays nice */
}
cshtml:
<div id="container">
<div id="content">
#RenderSection("ReportGrid")
</div>
<div id="rail">
#RenderSection("SPTreeGrid")
#RenderSection("ClientPickerGrid")
</div>
</div>
Although Oleg's suggestion does fix the height of the title, it does not constitute a solution -- at least not if you want the right div to be liquid and expand to the width of the browser window. The problem is that in order to use float:left on the right grid container, you must specify a width. Floated elements must have explicit widths associated with them (if not, they take on the width of the widest element inside them).
One work-around that worked for me is to set a height of the floated to something small (1px) and set an explicit height for the content of that div.
I have created a jsFiddle example that illustrates the problem and the work-around.
You should use
<div style="float:left">
<table id="list1"><tr><td/></tr></table>
<div id="pager1"></div>
</div>
<div style="float:left">
<table id="list2"><tr><td/></tr></table>
<div id="pager2"></div>
</div>
as the template for the grids. If you case it should be
<style type="text/css">
#left { float: left; }
#content { float: left; }
</style>
You should not forget to include "clear:left" in the style of the next div which should be after the grid if you want to brake the floating.
See demo with two grids here
Related
I typed this
#center-1, #center-2, #center-2, #center-3, #center-4,
#center-5, #center-6, #center-7, #center-8 { float: left; width:360px; }
HTML:
<div id="centerColumn">
<div id="center-1"></div>
<div id="center-2"></div>
<div id="center-3"></div>
<div id="center-4"></div>
<div id="center-5"></div>
<div id="center-6"></div>
<div id="center-7"></div>
<div id="center-8"></div>
</div>
and it doesn't work, why?
Guessing from your report that it "doesn't work", you're probably just not seeing the divs because there is no content, height, or padding. Add height:10px; or something, and some background - they will show up.
By the way, there's a slightly easier way to write this selector in your case:
/* Select all <div>s in the #centerColumn */
#centerColumn div {
float: left;
width:360px;
/* Test to make divs appear */
background:#f00;
height:10px;
margin:1px;
}
your divs do not have any content, that's why they are not visible. to make them visible add at least a into them, or add height/min-height to the css rule
Hi I have a container which has a width of 1150px. Now I have this other mainmenu, with width: 100% that I want to place inside the container. But then ofcourse it only get 100%(1150px) but I want it full width from side to side, so it should ignore the setted width only for .mainmenu
I tried position: absolute which made it all wrong and weird
#mainmenu
{
height: 37px;
width: 100%;
margin: 0px auto;
background-image: url(../images/mainmenu_bg5.jpg);
}
Why is the menu in the container in the first place? If you want the menu to span the full width yet the contents of the container are only 1150px I think it is by definition not right to put the menu in the container. Consider restructuring your document. This is an example, I do not have your full code:
<body>
<div id="page">
<div id="header" style="background:Blue;">
header header header
</div>
<div id="mainmenu" style="background:Green;">
menu menu menu menu
</div>
<div id="container" style="width:1150px;margin:auto;background:Red;">
container container container
</div>
</div>
</body>
And if you want the contents of the header and menu to span no farther than 1150px which I think is what you want then consider this:
<head>
<style type="text/css">
.pagewidth {
width: 1150px;
margin: auto;
}
</style>
</head>
<body>
<div id="page">
<div id="header" style="background:Blue;">
<div class="pagewidth">
header header header
</div>
</div>
<div id="mainmenu" style="background:Green;">
<div class="pagewidth">
menu menu menu menu
</div>
</div>
<div id="container" class="pagewidth" style="background:Red;">
container container container
</div>
</div>
</body>
If your container is fixed-width, but you want a menu which has a background at full page-width, then you can have the menu background as a positioned background of html, and maintain the same HTML code. This will make the menu's background "bar" cover the whole page width.
Example of this method: http://templates.arcsin.se/demo/freshmade-software-website-template/index.html
How to do this: use positioned backgrounds:
http://www.w3schools.com/css/pr_background-position.asp
css is below, but sometime it depend from the content inside:
#mainmenu
{
height: 37px;
width: 100%;
margin: 0px;
position: relative;
background-image: url(../images/mainmenu_bg5.jpg);
}
This is a jQuery solution:
$('#mainmenu').width() == $('#container').width();
To get a background image to simulate the menubar spanning the entire width of the page you need to apply the #mainmenu background to the body or a container div like so:
body {
background: url(YOURIMAGE) repeat-x left 64px;
}
The 64px needs to be how far the #mainmenu is from the top.
If the body already has a background image then you will need another div just inside the body containing everything else. If you have no control over the HTML then using javascript to insert a div that will either wrap all the content or get rendered behind it (using position and z-index.)
position:absolute is the best way to get this while keeping the background in #mainmenu. In fact, it's the only one I can think of off the top of my head. Without javascript, of course. Everything else will require changing HTML or moving the background property to a different place.
#mainmenu
{
position:absolute;
left:0;top:??px;
width:100%;
height:37px;
background-image: url(../images/mainmenu_bg5.jpg);
}
Because #mainmenu's width:100% then will become 100% of the viewport rather than the containing block. (Unless a parent is position:relative or overflow:hidden)
So when you say it "got all weird", I assume that's because of other things on the page. Both absolute and float take items out of the normal document flow. So things below the menu can & will end up underneath it.
#mainmenu
{
position:absolute;
left:0;top:??px;
width:100%;
height:37px;
background-image: url(../images/mainmenu_bg5.jpg);
}
#mainmenu + *
{
padding-top:37px;
}
/* Exact selector not recommended due to poor browser support */
The solution to that is, basically, applying 37px of margin or padding to the first thing after #mainmenu. You'll also be unable to center absolutely positioned elements using margin:0 auto, but if you want it spanning the full width of the viewport, that shouldn't be a concern...If you want to center the live sections of the menu, of course, you'll need some sort of descendant to center:
#mainmenu
{
position:absolute;
left:0;top:??px;
width:100%;
height:37px;
background-image: url(../images/mainmenu_bg5.jpg);
}
#mainmenu > *
{
margin:0 auto;
}
/* Exact selector not recommended due to poor browser support */
/* & more properties needed if descendant is list with floated <li>s */
#mainmenu + *
{
padding-top:37px;
}
/* Exact selector not recommended due to poor browser support */
But there are lots of things you'll see change in relation to other things on the page with position:absolute. So to troubleshoot that I really need to know more about the other things on the page.
You may find another solution, but if you don't -- post a page I can look at & I may be able to help you with the weirdness you experienced with absolute positioning. That is, if it will work with this particular layout.
What is the best approach to make 3 column fixed width cross browser compatible, accessible, semantically correct layout ?
<div id="wrapper">
<div id="header">
This is the Header
</div>
<div id="top-nav">
Top Navigation
</div>
<div id="leftcolumn">
Left Column
</div>
<div id="content">
content column
</div>
<div id="rightcolumn">
Right Column
</div>
<div id="footer">
This is the Footer
</div>
</div>
#wrapper {width:970px;margin:0 auto }
#header {height:100px }
#top-nav {height:30px}
#leftcolumn { }
#content { }
#rightcolumn { }
#footer {height:100px}
With this XHTML code what css should be written to make this 3 col layout.
cross browser compatible including
IE6 (without CSS hack or extra
conditional css for IE)
Width in Px
Centered
Font-sizing in em
Number of column can be extended or
removed 1-4,5 etc
SEO Enabled
Um, this is pretty darn easy with floats and faux columns.
Why do you have so many containers around the columns? You only need one. To clear the floats, do
#container {
width:960px; /* or 100%, or whatever. It needs to be set for it to work in IE tho */
overflow:auto; /* hidden works too */
background:url(./img/faux-columns.gif) repeat-y; /* google faux columns for A List Apart article */
}
and for the columns themselves
#col1 { width:520px; float:left; margin-right:20px; }
#col2 { width:200px; float:left; margin-right:20px; }
#col3 { width:200px; float:left; }
Use jQuery + its layout plug-in. Keep your full head of hair.
How can I build a fixed footer like facebook application design? Examples with css appreciated.
Duplicate of Facebook like status div
One way is given here:
In HTML:
<div id="container">
<div id="content"></div>
<div id="footer"></div>
</div>
In CSS:
#container {
position:absolute;
min-height:100%;
}
#content {
margin-bottom:100px; /* same as footer height */
}
#footer {
position:absolute;
bottom:0;
height:100px; /* same as content margin-bottom */
}
Edit: That link was based on this which has some exceptions
Facebook's footer stays in place as you scroll. To accomplish this, you'll need HTML like this:
<body>
<div id="content">
[content]
</div>
<div id="footer">
[footer]
</div>
</body>
and CSS like this:
#footer {
position: fixed;
bottom: 0;
width: 100%;
background: #f00;
}
The CSS position: fixed instructs the browser to keep this element's position fixed, regardless of scrolling.
I have found CSS Play a really helpful site.
http://www.cssplay.co.uk/
More specifically, http://www.cssplay.co.uk/layouts/, for layouts.
More examples at CSS Sticky Footer.
Edit: Another example with slightly cleaner CSS
I have a div that contains other floating divs:
<div id="parent">
<div style="float:left;">text</div>
<div style="float:left;">text</div>
<div style="float:right;">text</div>
</div>
How can I add bottom padding to the parent div and make it work in IE6 (or in other words avoid the bugs in IE6)?
Thanks
In my CSS reset file i have a "clearfix" code:
.clearfix:after {
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}
.clearfix {display:inline-block;}
/* Hide from IE Mac \*/
.clearfix {display:block;}
/* End hide from IE Mac */
* html .clearfix {height:1px;}
Looks weird but works great on ALL common browsers : IE6/7, FF2/3, Opera, Safari.
How to use?
Something like this:
<div class="clearfix">
<div class="floatLeft">
left div
</div><!-- /.floatLeft-->
<div class="floatRight">
right div
</div><!-- /.floatRight-->
</div><!-- /.clearfix-->
ATTENTION!
Do NOT use clearfix class on footers (or at last element in page), otherwise you will have an ugly space under all content.
Try floating the parent div.
The box model hack, basically providing IE specific padding should help
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>demo</title>
<style type="text/css">
<!--
div {
height:100px;
border:1px solid black;
padding-bottom:10px;
}
div {
\height: 140px;
h\eight: 100px;
}
-->
</style>
</head>
<body>
<div id="parent" style="float:left;">
<div style="float:left;">text</div>
<div style="float:left;height:100px">text</div>
<div style="float:right;">text</div>
</div>
</body>
</html>
IE doesn't seem to calculate the height of the parent when all the children are floated. If you can get away with applying a fixed height to the parent, you'll be able to add bottom padding.
If you can't fix the height of the parent, the next thing I'd do is see if there's a way to remove the float from the tallest child div. That'll give the parent div an actual height, and then the bottom padding should show up.
Similar to one of the other answers, this one worked for me in Firefox, and uses a bit less code. I think it works well in the other browsers as well, but you should confirm.
.clearFix::after{
content: '';
display: block;
clear: both;
}