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>
Related
I have several inline divs, inside a table cell, that are all left aligned, and will wrap to the next row when there is no more space. For the most part, they look pretty good, and rearrange to properly fill the screen.
The problem is when the width of the screen is JUST SHY OF the size necessary to fit another element on the right. There is a big gap on the right side of the screen, compared to the left. It's a stylistic choice, but I am trying to figure out a way to balance the margins on both sides, no matter what the screen size is. Here is my site as it looks currently: www.bradthedesigner.com
I am trying to get something that allows each individually to be left aligned, in a group that is centered. Instead I can either get everything left aligned (but the extra space at right looks bad, especially on small screens), or everything centered (which looks bad when there is only one item on the bottom row).
HTML
<center>
<div class="container">
<div class="outerelement">
<div class="element"></div>
</div>
<div class="outerelement">
<div class="element"></div>
</div>
<div class="outerelement">
<div class="element"></div>
</div>
<div class="outerelement">
<div class="element"></div>
</div>
<div class="outerelement">
<div class="element"></div>
</div>
<div class="outerelement">
<div class="element"></div>
</div>
<div class="outerelement">
<div class="element"></div>
</div>
<div class="outerelement">
<div class="element"></div>
</div>
</div>
</center>
CSS
.container
{
text-align:center;
border:2px solid black;
}
.outerelement
{
width:216px;
height:216px;
display: inline-block;
}
.element
{
background-color:#999999;
width: 200px;
height: 200px;
border-radius:16px;
}
Looking at the code I've got online, I see that I switched to tables, because I was more familiar with their behavior and borders for debugging. Here is me recreating my results with divs though... I've tried using <center> outside, align=center inside, and all sorts of CSS styles that came up on other searches through stack overflow.
I've been beating my head against a wall, and can't seem to find any-one doing something similar. It doesn't seem too crazy does it? Basically it boils down to, if the contents of a div are too big to fit, of course it should wrap... but why then does the div stay the width of the screen if the contents that fit on any row don't reach that far? A table with rows and columns would work, but that isn't able to adapt to different screen resolutions or window re-sizing, is it?
Well from the image you are posting I can tell the problem ...
You want to whole block that contain the small blocks to be horizontally aligned (equal spaces on each side) and the inline divs to be aligned to the left ...
Your first attempt is the default behavior (the inline blocks are wrapping to the next line but no proper alignment for the container)
Your second attempt was to set text-align: center to the container which is perfect but it won't align the last line as you desire ...
To achieve what you want, you need to wrap all the inline divs in a single div with predefined width ... Something like
.wrapper-div {
width: 500px;
margin: 0 auto;
}
The margin: 0 auto declaration will force the div to be horizontally aligned as you want.
When you render out the blocks, render out empty placeholders that aren't visible but take up the space of the missing elements on the last row. This will push the existing elements on the last row to the left.
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!
I have a page where I want an element to align right at the same time I have elements which may be wide and cause a horisontal scrollbar. For instance:
<body>
<div style="float:right">Stay right</div>
<div style="white-space:nowrap; clear:both; font-size:2em">
Wide child element which determines the width of the page.
</div>
</body>
This works fine if the wide element fits within the browser window. But if the browser window is too small so that a horisontal scrollbar appears the "stay right" element will align with the window and not the page:
If I move the scrollbar the "stay right" element moves and doesn't really align to anything.
If a add a table around the whole page it does what I wan't:
<body>
<table width="100%"><tr><td>
<div style="float:right">Stay right</div>
<div style="white-space:nowrap; clear:both; font-size:2em">
Wide child element which determines the width of the page.
</div>
</td></tr></table>
</body>
The "stay right" element will align with the right side of the wide child element regardless of browser window size.
Edit: The table based solution above will align right to largest of the width of the wide child element or the window width. Effectively this gives the page a "minimum width" which is determined by the contents of the page (ie. the wide child element). This is what I want - which isn't clear from the original text, sorry.
I am wondering if there is a better way than wrapping the entire page in a table.
That is a very interesting problem. It actually happens because the computed width on div matches the window size (and body size) instead of the width of the text. The floating text looks to it's container for a width/height when rendering (and because that computed value is actually size of the window, the float stops at the edge of the window).
This does not really occur often because most sites use something like grid960/foundation/etc and a min/max width are provided (you probably figured out that setting a width will fix your problem).
I don't know of a really good solution for dynamically sized text (with only css)... The only thing I can think of without using a table would be to use a clearfix. It is really used/created for element with floating children (in order to give them a correct width/height.. floating elements do not normally effect the containers dimensions) but it also will work in this case.
<body>
<div class="clearfix">
<div style="float:right">Stay right</div>
<div style="white-space:nowrap; clear:both; font-size:2em">
Wide child element which determines the width of the page.
</div>
</div>
</body>
EDIT: I lied, I came up with a second (better) way but it does require a more modern browser. It is to use a wrapper with a display: inline-block OR display: table. It really is just a sub-set of the clearfix but will work if you can get away with being IE8+ based.
<body>
<div style="display:inline-block">
<div style="float:right">Stay right</div>
<div style="white-space:nowrap; clear:both; font-size:2em">
Wide child element which determines the width of the page.
</div>
</div>
</body>
NEVER wrap an entire page in a table. It messes up your HTML since about the year 2000.
I think you want a fixed position for your div, it lines up the element with the window instead of the page:
.myDivThatFloatsRight {
position: fixed;
top: 10px;
right: 10px;
}
I ran into this very strange "bug" with IE7, I have many div.column floated left, no width specified. The strange thing is that in IE7 the hr element width seems to take up 100% width of the container of these columns. And also the css rules for hr do not seem to be applied nicely, the background img looks very weird, border doesnt seem to be removed:
hr.style3{background:url(../images/backgrounds/hr1.gif) repeat-x;border: 0 none;height:3px;margin:15px 0;}
<div class="column last">
<div class="title">Useful info</div>
<hr class="style3" />
<ul class="links line_height3">
<li>
sample link
</li>
</ul>
</div>
tw16 suggested http://borgar.net/s/2007/01/style-hr-elements/ which is a very cool technique, however for some reason I could not make it work for my particular case, perhaps I missed something.
Anyhow, I opted to use a div instead, but to make it behave similar to hr I wrap this div around a display:none hr:
css:
.hr hr {
display:none
}
html:
<div class="hr"><hr /></div>
However, if your div.hr is inside a floated container (which, in my case, is also in another floated container), then you may have to assign a fixed width for it (only for IE7). I use modernizr plugin so I did something like this:
.ie7 .hr {width:100px}
With this method, you can:
Style the "hr" with background image etc easily, which should work cross browsers
Still keep the hr element where you want it so text readers and such can see it
I'm helpless, tried my best understanding CSS but it's just not for me.
I would like to make a really simple MasterPage:
at the top a div of full width and height 40px (1)
at the bottom also a div of full width and height 40px (2)
in the middle:
on the left: a div of width 200 px (3)
on the right side of the left div: a div with contentPlaceHolder (4)
What I would like to get is: if i make some site that uses my master page and place a panel in the contentPlaceHolder that has width 800px, I would like my site to adjust to it - top, middle and bottom divs to have their width of 1000px (200 + 800). I also wouldn't like (and I have a huge problem with that) the (4) to move down if I resize (shrink) the browser window - I would like all the divs to be blocked.
This is my master page html:
<div>
<div class="header">
</div>
<div>
<div class="links">
</div>
<div class="content">
</div>
</div>
<div class="footer">
</div>
</div>
What kind of CSS do I have to write to make this finally work?
Not sure if you have checked into this or not, but we use the YUI-Grids CSS Framework for our layouts. It keeps us from having to spend a lot of time on CSS, which we are not great at being developers.
There is even a grid builder which will let you graphically layout a page, and then copy and paste the required HTML to make it happen :)
To prevent floated divs from being "squeezed" out of the alignment you want, you usually use either width or min-width.
For example, in this code the div containing the links and content will never be smaller than 1000 pixels. If the screen is smaller than 1000 pixels, a scrollbar is displayed.
<div style="min-width: 1000px">
<div class="links"></div>
<div class="content"></div>
</div>
You could also use width instead of min-width:
<div style="width: 1000px">
<div class="links"></div>
<div class="content"></div>
</div>
The difference between the two is simple: if you specify min-width, the div CAN grow to be larger if it needs to. If you specify width, the div will be exactly the size you specified.
Be aware that min-width is not supported by IE6.
Here's a quick stab at specific CSS/Markup for this problem.
Markup:
<!-- Header, etc. -->
<div class="contentView">
<div class="links">
</div>
<div class="content">
</div>
</div>
<!-- Footer, etc. -->
CSS:
.contentView {
/* Causes absolutely positioned children to be positioned relative to this object */
position: relative;
}
.links {
position: absolute;
top: 0;
left: 0;
width: 200px;
}
.content {
padding-left: 200px;
}
You might want your footer to be "sticky." Check here for information on that: http://ryanfait.com/resources/footer-stick-to-bottom-of-page/
How appropriate this is depends on precisely what the design calls for. This makes the links section more of a floating box on the left than a column for example.
This ends up looking like this (.content is green, .links is red):