I am using Twitter Bootstrap plugin, mainly just the grid system currently.
I am trying to put one row on top of another doing some stuff for responsive design.
In Chrome this works perfectly:
<div class="container">
<div class="row">
<div class="content">
abcd
</div>
</div>
<div class="row" id="moveUpRow">
<div class="content">
efgh
</div>
</div>
</div>
CSS:
.row {
height: 200px;
}
#moveUpRow {
margin-top: -200px;
}
But in Firefox and IE they both ignore the negative margin. I have tried top: -200px, but that just moves up the row and not all of the elements below the row. Leaving big white space.
Any other solutions to this problem? Or any suggestions on how to "pull" up any content below the row?
I was having the same problem. In my case I had two floating elements in my first row, so when I placed a negative margin to the second one it would move the entire row. Weirdly it worked fine in Chrome but not in Firefox.
Try adding overflow:hidden; to the row if that's the case.
The HTML you posted and CSS looks good to me in Firefox and IE, see http://www.bootply.com/72944
Perhaps you could start by double checking the paths to your CSS files and make sure there isn't some other problem with the HTML on your page?
Good luck!
Related
I have a fiddle here which shows my issue. You may need to make the 'result' quadrant wider to show the issue.
I have a couple of columns in my bootstrap layout but I can't seem to get my button to layout inside the parent div, it always seems to overlap it:
At first I thought it was due to the padding of the columns in bootstrap but I have removed that and the problem persists. I'm obviously missing something fundamental about how this is supposed to work, so any pointers to some help with css might not go amiss either.
apparently I have to link to some code to include a link to a fiddle so here is some:
My html is:
<div class="col-md-3 col-lg-3 nopadding">
<div class="definition-pallette">
<div class="row nopadding">
<div class="col nopadding"><button data-bind="click: showStepModal">+ Step</button></div>
</div>
</div>
</div>
and the additional css on top of the bootstrap default is:
.nopadding {
padding-left: 0 !important;
padding-right: 0 !important;
}
Seems to be a few things going on here. The main issue is you are using a lot of divs with a class of 'col' inside your 'row' divs. To get them to start behaving you need to define what size the col is. This fixes most of your problems. So for example, where you have this
<div class="row">
<div class="col">Some content</div>
</div>
Change that to something like
<div class="row">
<div class="col-xs-12">Some content</div>
</div>
And it starts behaving.
I also got rid of your .nopadding class as you don't need that.
Here is an updated fiddle - http://jsfiddle.net/T4XY4/1/ - it fixes most of the things in the right panel, but I'll leave the rest to you. You may want to choose which classes you actually want inside your 'row' divs, I just chucked in xs-12 for simplicity.
Edit
The Bootstrap docs confirms that if you are nesting columns you need proper col-* classes - http://getbootstrap.com/css/#grid-nesting
Its caused by bootstraps margins in the row class adding margin:0; to your no padding class will fix this but might cause layout issues in other places or on mobile devices.
.row {
margin-right: -15px;
margin-left: -15px;
}
I'm writing a responsive design for a website and I have 4 separate divs, which should be arranged 2 TOP x 2 BOTTOM. At some resolutions it seems to work fine, but at others there is a hole between the upper left div and the bottom left one.
This is how it should look like:
http://postimg.org/image/76q5y5w5v/
This is how it looks when improperly rendered:
http://postimg.org/image/6a4f8x4j7/
If you want to see all of the CSS applied, just visit http://bbogdanov.us/ (bottom of the page) and try to play with the browser's size to monitor the behavior of the div's at the different sizes.
The reason this is happening is because the div elements are being floated. When you lower the screen size, the block is becoming longer (taller) and the float is breaking. You can clear every other line by adding this snippet:
.uslugihome2:nth-child(odd) {
clear: left;
}
Caution, though, you need to use a polyfill for this to work on older browsers because some pseudo-classes like nth-child are not supported. I recommend Selectivizr.
Currently you have the following markup for each box:
<div class="uslugihome2">
<div class="usluginame">
<div class="uslugiimage">
<div class="uslugidesc">
</div>
With reason why you see the gap is due to the width and margin that are set on uslugihome2.
So what I would so is, create another div which wraps the child divs like so:
<div class="uslugihome2">
<div class="uslugi_wrapper">
<div class="usluginame">
<div class="uslugiimage">
<div class="uslugidesc">
</div>
</div>
Then go to line 316 of style.css and remove margin: 2.5%;, then change the width to 50%.
Once done, add the following to your css file:
.uslugi_wrapper {
padding: 0 15px;
}
Not sure which browser you want to support but this will also ensure support for the likes of IE8
Hope this helps
That's because the height of those divs change as the width of the window changes. Try wrapping a div around every two separate divs. Let's call that a row.
<div style="display: block;">
<div class="uslugihome2">...</div>
<div class="uslugihome2">...</div>
</div>
<div style="display: block;">
<div class="uslugihome2">...</div>
<div class="uslugihome2">...</div>
</div>
Please check out this website --> http://justicecup.radiantwebtools.com/
The section underneath the nav/logo/social-media area is further apart in Firefox as opposed to Chrome/Safari (the desired separation).
The issue seems to have to do with this part of the HTML:
<div class="header-container">...</div> <!--- Okay... --->
<div class="row content"> <!--- DevTools shows this the right underneath the header area...okay, thats correct --->
<div class="width-container">...</div> <!--- on Chrome/Safari it's good. On Firefox, this is pushed down further....why? --->
</div>
I have tried giving the header area some css to work against this, to no avail
.header-container { overflow:none;}
This screenshot shows the difference too --> http://screencast.com/t/CrF9HEaki
Thanks for your help.
I think the issue might have something to do with collapsing margins.
One fix for the issue, is to change the two rules below:
#template .content .story-primary {
margin-top: 28px;
}
#template .content .story {
margin-top: 62px;
}
to:
#template .content .story-primary {
padding-top: 28px;
}
#template .content .story {
padding-top: 62px;
}
Your page layout is quite complex and I think part of your problem stems from using .width-container in two unsuitable places. I've been fiddling with the css using the browser's inspect element, however when I change the styling in one it cascades to the other. I think a redesign of your page would be helpful. I would suggest enclosing the whole page content (excluding the background) in a div and applying the width-container styling to that.
<div id="body">
<div class="width-container">
<div id="templatewrapper"> ... </div>
<div id="templatefooter"> ... </div>
</div>
</div>
Next you should rename the width-container around the header stuff to something more appropriate.
<div id="page-header">
<div class="logo"> ... </div>
<div class="rwtmodule navigation-module meganav"> ... </div>
<div class="social-media"> ... </div>
</div>
After doing this you should replace the float:left; on the logo, navigation and social media to display:inline-block and get rid of the various margins. Then apply a padding or margin to the #page-header to push them down. The .logo and .social media will be in the wrong place but you can use position:relative and top:/*some value*/ to correct this.
After doing this, the site should look like the current firefox version in both firefox and chrome. You can then move the main body of the page up using relative positioning as you did with the logo and social media.
Remember to test this out in a safe location first!
Hope this helps.
I don't know much about html or css but I have done this much;
I want to stack divs so it looks like this (please excuse the bad drawing) ;
I have googled how to and tried different thing but the likes/dislikes boxes always end up not moving or move to the very left/very right.
<div style="float:left;width:300px;height:350px;text-align:center;">
<div style="float:left;width:500px;height:200px;text-align:center;">
<div id="wrapper">
<div style="align=center;">
<div id="first">1</div>
<div id="second">2</div>
These are th three divs I have.
First one has links [the add/message etc]
Second one has "thelastgecko" and profile text.
And I am trying to use the last box for likes/dislikes but whatever im doing it isn't working.
You usually use one "huge" div, set it below 1024 pixels wide so old screens can view it and then you usually center it in the middle of the screen. Then inside of that big div you put the "add me - message me - gallery" with a "float:left" or "position:absolute" I prefer the latter. then you make another div containing the "The last gecko" + dislikes & likes and center that div, then after that I would make another div and either do a "float:right" or a "position:absolute; left:'huge width minus this ones width".
I did write everything in text and readable since giving the code away doesn't teach as well.
But in case you still didn't get it, here's my idea:
<html>
<head>
<style>
body{margin:0px;padding:0px;width:100%;height:100%;}
#container{width:900px;margin:auto;margin-top:200px;}
#add_me,#dislike_text{position:absolute;width:200px;background-color:#ace;}
#last_gecko,#holder{margin:auto;width:500px;background-color:#eca;}
#likes,#dislikes{float:left;width:250px;display:block;background-color:#cae;}
#dislikes{background-color:#cea;}
#dislike_text{margin-left:700px;background-color:#eac;}
</style>
</head>
<body>
<div id="container">
<div id="add_me">add me<br>message me<br>wuts going on</div>
<div id="dislike_text">dislike text</div>
<div id="last_gecko">
Last Gecko
<div id="holder">
<div id="dislikes">dislikes</div>
<div id="likes">likes</div>
</div>
</div>
</div>
</body>
</html>
Made it workable, it will at least show you in what direction to move, It might not be the best way but it is my way.
You could do something like this: http://jsfiddle.net/jAKgd/
CSS
#wrapper {
width: 800px;
}
#leftColumn {
float: left;
height: 800px;
width: 200px;
margin-right: 5px;
}
#leftColumn a {
display: block;
}
#rightColumn {
width: 100%;
}
#contentDislike,
#contentLike {
display: inline-block;
width: 250px;
}
Obviously the height/widths can be changed to meet your needs. I was just doing a quick example.
HTML
<div id="wrapper">
<div id="leftColumn"> Link
Link
Link
Link
Link
</div>
<div id="rightColumn">
<div id="contentTop">
<img src="/images/image_name.jpg" alt="image text here" />
<p>THIS IS WHERE YOUR PROFILE TEXT WOULD SHOW. IT CAN EXPAND HEIGHT AS NEEDED.</p>
</div>
<div>
<div id="contentDislike">DISLIKE CONTENT HERE</div>
<div id="contentLike">LIKE CONTENT HERE</div>
</div>
<div>YOUR LOWER TWO COLUMNS WILL GO IN THIS DIV</div>
</div>
</div>
It's a bad way of design to use floats to place divs at some place.
It's a much better way to use, for example, a flex layout.
But this is not supported by all browsers (But nearly. If you can, take this option).
Another solution is this one:
Use the width option. You set the width of any div of your html to a fixed number, in percent, of course. Watch this example
But if you do this, you will have to pay attention for very large and very little screens, I think you would have to write alternative css style sheets which are working with (max-width) and (min-width).
And there is another solution: the gridlayout. It is part of the standards since 2013 (I think) but it's not well supported yet. But maybe in future.
Hope I could help
<html>
<head>
</head>
<body>
<div style="height:9.5in;width:7in;position:relative;overflow:hidden;">
<div style="position: absolute;left: 204px; top: 64px;">
<h1>One</h1>
</div>
</div>
<div style="page-break-after: always"></div>
<div style="height:9.5in;width:7in;position:relative;overflow:hidden;">
<div style="position: absolute;left: 204px; top: 64px;">
<h1>Two</h1>
</div>
<div style="position: absolute;left: 204px; top: 164px;">
<h1>Three</h1>
</div>
</div>
</body>
</html>
The above code displaying properly in brower, but in print/print-preview in firefox, the 2nd page css top is not working. Both the words "Two" and "Three" overwritten. Please help me to align it properly.
There is a tricky print-rendering bug in Firefox that causes this behavior. The top margin of the 2nd (or more) printed page in Firefox is 1px too high. Being inside what I will call the "y-pos dead zone" the y-positioning of elements is ignored, thus causing the text "Two" and "Three" to render on top of each other as if they both had the css definition top:0px.
The easiest fix/hack is to add a margin-top:1px onto any page past the first.
If you want a better visualization of this problem add a border onto the absolutely positioned divs.
(If you want some insight into how Firefox is doing the rendering try setting a negative margin-top:-80px which will still have the rendering bug. But if you go up to -85px suddenly the bug goes away. This begins to show that the bug has something to do with how Firefox is trying to render around the gutter between pages.)
I was fighting all day with this bug until I found this Question, thx a lot! That pointed me to the right direction. The fix from purgatory101 did not work for me, but at least I could see, that FF is not capable to print anything with absolute position. We changed it to relative and now it seems to work. There is still a bug, that when it comes out of the printer, it is moved to the right a bit (the preview is ok, the papers not), but this is a big success for me.
So my solution: put everything you need positioning to a div wrapper with absolute positioning and inside you can put relative divs with the same coordinates as you used earlier.
<div style="position: absolute;">
<div style="position: relative; top: ...">
blah
</div>
<div style="position: relative; top: ...">
bleh
</div>
</div>
Update: I realized that IE sufferfs with similar bugg - all absolute positioned elements loose the css styles from the 2nd page (eg. z-index or opacity), but at least they stay on right coordinates. Just chrome seems to me now doing everything right.