Let's see:
Container box is 920px, left box is 600px, right box width dinamically changing between 200px and 400px. As we know in basic situation if two floated box wider than their container the lastest one breaks into a new line.
I tried to solve it with negative leftmargin on right box and it works fine. (buggy on IE6 but it does not matter.)
Is negative margin good or can I avoid annoying float box breaking in other way? (i don't want to use absolute positioning.)
Negative left margin is great. I use it lots of time to align to the center left:50%; margin-left: -250px; // width == 500px; so don't worry you can use it without a problem.
Also ppl use it for lot's of small things. It's not uncommon for sites to have elements with negative margins.
Even here in Stackoverflow if you look at the CSS you can find negative margins.
Related
I am looking to get some space left and right from a Boostrap container.
At the moment I am doing it by having a 'fluid' container/section and setting some margin on both sides. That way we have some space left and right.
The problem with doing that is that on larger screens it will look horrible and it gets stretched out.
What I'm trying to achieve is to have a more consistent left and right spacing outside the container when on a normal screen:
So that the spacing outside the container is always like 10% and not being stretched out on larger screens.
Here's a Codepen with what I have so far:
https://codepen.io/monsmado/pen/ZEorope
'codewise' it is not the most optimal, because I quickly copied it from my React/Next.js project
If I'm interpreting your question correctly, you could set a max-width: 1400px; (or whatever you want) and margin: 0 auto on the .hero. You would need to override the other !important rules that are getting applied there.
I encountered a problem and didn't find a solution for this. I'm pretty confused because I thought this was a very simple requirement.
There are the following elements:
a surrounding div#wrapper
div#A, floating left and fixed width
div#B, floating left (right of #A) and dynamic width
Inside of div#B there are plenty of images, floating left and fixed width (and height).
Depending on the screen resolution there should be 1, 2, 3, n columns of images on the right part of the screen (next to div#A). Instead of this, container #B is aligned below container #A and uses the full window width.
My alternative attempt was giving #B a float:right and a margin-left (which was greater than the width of #A), but that also didn't work.
I would like to avoid absolute positioning because the height of the surrounding wrapper should increase with its content.
To visualize what I'm talking about, I made the following diagram:
http://abload.de/img/rezeptbilder1k8lsr.png
Many thanks in advance!
this is happening because..you are having dynamic width for your div#B...ans as there are plenty of images and they are aligned next to each other...so eventually div#B grows to 100% width...when it has 100% width then it arrives under the div#A.because 100% + div#A's width cant fit together in a 100% wide screen..you understand???
1st solution :: you may use width:calc(100% - div#a's width).it will give div#b a width equals to remaining free space besides div#a
or you may use overflow:hidden in your div#B...now at first this div will grow eventually to take the width of remaining free space with a single row of images and once it has 100% width it will create another row of images..but for this your wrapper must have fixed with with **overflow:auto;** also..overflow:auto; in wrapper will introduce scroll bar when combined with of div A and B is greater than 100%
EDIT :: CHECK BROWSER SUPPORTS FOR CALC() HERE
note::if you provide us your try our suggestion will be more appropriate
I can't really provide a solution because you haven't provided any code. (please do so)
That said... Based on your description and your image, your floats on div#A and div#B are breaking. The most common reason for this is that your width is adding up to be more than 100% of the width of your div#wrapper (the containing or parent element of the floated elements)
Your floats should always end up equally 100% (less than 100% works but then you have some extra space somewhere etc).
For example... If you have #wrapper which is 100px wide, then you can have two div's inside which are 50px and 50px wide, or 30px and 70px etc. as adding those values = 100px which is 100%.
So... Why is yours breaking? I suspect it is because you are trrying to mix a dynamic width element, with a static width element. Float was never designed do something like this. There are various ways to achieve it, but which way depends on your code which I don't have.
Other possible reasons why is is breaking is because of too much margin space, too much padding, or even a border on your divs. The width of an element, by default includes it's padding, margin, and border widths. If you have a 100px wide div, with 10px of padding on the left and right and a 2 px border the whole way around (2px on each side). Then you have a div with a total width of 124px.
I need to place two repeated background images on the left and right border of a div. I don't know the width or the height of the div.
I though of placing the left border in the div, and floating the right border to the right.
This is my layout:
http://jsfiddle.net/WmLhV/
In Firefox it works ok, but in the other browsers, when the browser window is too short, and a scrollbar appears, the float disappears.
As you can see the container is of display: table-row. I cannot change this or the layout will break...
Is there any better way of putting an image to the right? even without a float?
your div with right align doesn't have height if you want to use 100% height you have to use position. check this fiddle i have done this via position http://jsfiddle.net/WmLhV/4/
Your <div> that's floated to the right doesn't have height. Firefox seems to understand the 100% height even when the contents of the <div> are empty but IE9, for example, doesn't.
One alternative approach would be to give your <div> that contains the text 60px padding-left and 60px padding-right, and then apply background images to it (note: multiple background images will only work in CSS3-friendly browsers). The padding essentially creates empty space for the your background images and always has the same height as the text.
A further, slightly more convoluted approach, would be to divide the inside area into three (left, middle, right) and setting display: table-cell (or using a table), and then essentially allowing the height of the left and right cells to adjust according to the height of middle cell which contains the text. This would reveal the background images on the sides according to the height of the middle text --- standard table behaviour. This would get rid of the need for floats. display: table-cell is not supported in IE6/IE7, but a normal HTML table would work fine.
So I wanted a centered, constant width, three-column layout that was compatible with IE and whose columns would stretch to all be of equal height (equal to the height of whichever column had the tallest content). I know- keep dreaming, right?
Well I almost figured it out. After combining the techniques I found here on Stack Overflow with a nifty CSS hack for fixing width issues and the text-align trick for centering, as well as experimenting with different margin/padding values, I have a nearly perfect layout. I'm doing this for a friend's aunt and you can see what I have so far at www.allfourseasonslawncare.com/index.php (The index.html is her original site which she paid someone $500 to make for her. I'm re-creating the page using CSS)
The only bug I'm getting now is that in IE the left column has about a 30 pixel left margin, and all elements inside of the left column have a second 30 pixel left margin.
I can easily fix this using the html>body trick to give a larger negative margin to IE, but I'm trying to figure out where this magical margin is coming from so I can look for another solution. Any ideas?
It might be because your ul elements have a 30px margin. Try adding a span to each list item and then add the padding.
Also, about the layout, you shouldn't need to add margin to each column (I see you have margin on .leftRail, .rightRail, etc). I noticed your .columnWrapper element is only 615px wide, thus you're using negative margin to move these elements.
Instead, you can use a clearfix hack to effectively float elements. (Link for the CSS is below, paste it into the bottom of your CSS file)
After you placed the clearfix in your css, then you go to your wrapper div that is wrapping all of the columns and simply place a class="clearfix" on it.
Then, you just float each column left (float the .rightRail right), specify widths and voila! It should be a 100% working, less-hacky solution.
When you hack too much, IE tends to bug out. Comment if you need any help.
Clearfix: http://gist.github.com/550114
So I spent an hour or two yesterday wrestling with it and I spent another hour this morning (posting updates as I started to get closer as comments to my own question) and I've finally figured it out.
In Internet Explorer, the "width: 100%" command is interpreted as the entire width of the parent element, not the width minus padding. This was giving the table a width of 615 pixels (the width of the center column). Seeing that this would stretch beyond the container, Internet Explorer respected only the left padding and the table stretched 15 pixels (the size of the left padding) beyond the right side of the column.
Since it stretched outside of the column, this re-arranged all floating elements in a way that to Internet Explorer seemed logical. That being, for some ungodly reason, moving the left rail the distance of the right padding (15 pixels) to the right of the left padding (15 pixels into the center column), thus moving it a total of 30 pixels into the center column, or the magical 30 pixel margin.
The solution? I'm still working on this. I moved the padding from the #content div to the #center div as an experiment and this caused the issue to arise in Chrome while simultaneously resolving it in Internet Explorer. At least the primary question was answered, though. We now know where the magical 30 pixel margin was coming from. As a quick solution I've set a constant width on the #content div of 585 pixels and given it margins instead of padding.
#center{
float:left;
width:615px;
margin-right:-615px;
}
#content{
width:585px;
margin:10px 15px 10px 15px;
}
Check my website, and see the Divisions left menu. When you have maximized your broswer there is no problem, but when you restore it to half of screen, the left menu overlaps to the right.
Here is the CSS code. Can someone help me?
It's because your "divisions" div is absolutely positioned.
You can remove "position: absolute" and increase the width of the "divisions" div to 300px.
Your left menu is absolutely positioned that's why it overlaps other content when window size is too narrow. But the solution for this problem is quite tricky and actually depends on what you want to achieve.
Percentage
One possible solutions would be to set width on "divisions" and "content" div in percentage. This way they'll never overlap. But it depends if you can afford to have dynamic width for your "content" div.
Repositioning
If your content must be fixed width... You'll first have to decide how would you like your content/menu to appear when window is too narrow (maybe even narrower than content width)... And work from there.
Body element width
Set minimum window content (as in <body>) width. Either by using:
transparent image at the beginning of your document <img src="t.gif" width="1250">
set body's minimum width css as min-width: 1250px; has to be 1250px wide, because content is centrally positioned, so it must have equal space on the left and on the right (right one being useless empty space just allowing non overlapping space on the left of content)
The last one is actually the simplest and works. It only makes it a bit wide for smaller screen sizes, but your content width (including menu on the left) already exceeds 1030px anyway...
A very straight-forward and simple
and quick-fix solution would be with CSS :
#content {style.css (line 17)
left:-270px;
margin:0 auto;
padding:30px 10px 0 550px;
position:relative;
width:780px;
}
I tried this in my Firebug and it worked fine. hope it'll suit you're needs :)
next time just use css floats:
put the side menu and the content div in a wrapper,
float:left for the menu, and give the wrapper a fixed width, and center align it.
you can also make the navigation menu go "out" from the left with negative left positioning it.