In a previous question I was able to allow an image in one row overlap the contents below it. However, I realized that now the text and other content that is being overlapped is actually getting pushed down and ruining the format. See updated example here. In summary:
<div class="container" role="main">
<div class="row" id="overlap">
</div>
<div class="jumbotron">
<!-- this is being overlapped -->
</div>
</div>
CSS
#media (min-width: 992px) {
#overlap {
height: 70px;
}
}
How can I make sure that the contents in the .jumbotron div does not get forced down?
If you add the following CSS, the image should float overtop without pushing any contents down.
#overlap .thumbnail {
position: absolute;
z-index: 100;
}
Updated: http://www.bootply.com/120760
You can add the following styles below to make it work.
CSS
.thumbnail{
position:absolute;
z-index:100;
}
Demo
Related
I have three images side by side in my web page and in the responsive CSS media query for mobile, I want the third image to be centered on the next line with the first two above it, one floating left, one floating right. I can't do it! How do I write this CSS?
You should share you code, but I'll try to help you even so.
<div class="main">
<div class="image-left"><img src=""></div>
<div class="image-right"><img src=""></div>
<div class="image-center"><img src=""></div>
</div>
CSS:
.main {
position: relative;
max-width: 100%;
}
.image-left {
float: left;
}
.image-center {
margin-top: 5%;
margin-left: 10% ;
position: absolute;
}
You need to adjust .image-center { margin-top and margin-left according to your layout.
If you need space between image-left and image-right, you add another class;
.image-right {
margin-left: 10px;
}
I have been trying to build a website having a 3 column layout. All of the body is given a margin:0 auto to keep it at the centre, and has a minimum width of 1218px.
Now, what I want to do is reposition the right column in such a way the it goes below the left column without affecting the centre column. A live example would be twitter home page, where at the left I can see my profile and trends, the centre column features the tweets and the right column shows suggestions on a 1366x768 screen, now if I change the screen size to 1024x768, the column of suggestions at right goes down below the left column but the central timeline is unaffected.
The definition would be:
<div class="containter" style="margin:0px auto;">
<div class="left-col" style="width:290px; float:left;">Left Stuff goes here </div>
<div class="center-col" style="width:590px; float:right;"> Center body </div>
<div class="right-col" style="width:290px; float:right;">right Stuff goes here </div>
</div>
Now note that the central column has a right float, copied from twitter.
I can't use media queries for that since the website is going to deal with a lot of old browsers and also I would like to avoid JavaScript if possible.
Any help?
You can't do that with "min-width" of the main container. You must use "max-width" since you want to make sure something happens when the screen width gets more narrow. And the main column (in the center) has to be left-floated, not right. Here's a possible solution. However the whole questions seems weird to me since you want to make a responsive layout in an old browser that doesn't support responsive CSS.
<style>
.container {
max-width: 1218px;
}
.leftColumn {
float: left;
width: 300px;
height: 500px;
background-color: brown;
}
.mainColumn {
float: left;
width: 700px;
height: 500px;
background-color: darkgreen;
}
.suggestions {
float: left;
width: 218px;
height: 500px;
background-color: darkorange;
}
.cleaner {
clear: both;
}
</style>
<div class="container">
<div class="leftColumn">
LEFT
</div>
<div class="mainColumn">
MAIN
</div>
<div class="suggestions">
SUGGESTIONS
</div>
<div class="cleaner"></div>
</div>
Making 3 column responsive design using media queries is simple, but in case I want the middle column to stay in mid with 100% height and the right column goes on the left column it gets tricky.
The problem emerge because mid column height is variable, therefore it will be impossible to give negative margin-top to the transformed right column.
here is css code example:
/* 3 columns css */
.colLeft, .colRight, .colMid{
width: 280px;
float: left;
}
.colMid{
width: 500px;
}
.colRight{
width: 240px;
}
.container{
width: 1020px;
margin: 0 auto;
}
/* Media queries */
#media screen and (max-width: 1020px) {
.container {
width: 780px!important;
}
.rightCol{
width: 280px;
}
}
Html:
<div class="container">
<div class="leftCol">
</div>
<div class="midCol">
</div>
<div class="rightCol">
</div>
</div>
this code works fine, But mid column height push the transformed right column down.
My question: Is there HTML/CSS solution for this issue? or do I have to change HTML rendering when screen re-size?
Thanks,
Looks like your float: left is being applied to your .colRight class. This could be what is causing your right column to display on your left column.
I found the solution, using only CSS/HTML. Here is the explanation:
I created a duplicate rightCol div and placed it inside leftCol div, and named it righCol-left.
Initially the rightCol-left is set to "display:none"
when media screen is lower than 1020px, hide rightCol (display:none), and display rightCol-left (display:block)
here is the CSS:
.rightCol-left{display:none;} /*duplicate div*/
#media screen and (max-width: 1020px) {
.container {
width:780px!important;
}
.rightCol{
display:none;
}
.rightCol-left{
display:block;
width:280px;
}
}
here is the HTML:
<div class="leftCol">
/*Left column content*/
<div class="rightCol-left"> /* will be displayed when screen is below 1020px */
</div>
</div>
<div class="midCol">
/* mid column content */
</div>
<div class="rightCol"> /* gets hidden when screen is below 1020px */
</div>
This works perfect, the only bad thing would be the repeated HTML code. But this is not noticeable and very minor, after all, HTML code produce far less load to the webpage compared to JavaScript or anything else.
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
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