I have a website in which I want to have a similar layout as Stackoverflow regarding browser window resize.
So I have the following CSS :
#site-container {
margin: 0px auto;
text-align: left;
width: 100%;
zoom: 1;
position: relative;
}
body {
font-family: arial, helvetica, sans-serif;
font-size: 81.25%;
background-color: #fbf9ef;
}
#div-menu {
display: inline;
}
#header {
width: 990px;
height: 80px;
margin-left : 127px;
margin-right : 127px;
margin-bottom: 12px;
margin-top: 20px;
border-bottom: 1px solid #c0c0c0;
}
#content {
width: 990px;
margin-left : 127px;
margin-right : 127px;
}
However when I resize my browser Window it does not behave like Stackoverflow, somehow Stackoverflow seems to be Floating and automatically reduce margins according to the browser window size.
Thanks
Step 1
Set your #site-container element's width to a fixed value (e.g. 990px), rather than to 100%. Currently, it automatically fills the window, leaving no room for any margin. StackOverflow uses a fixed value of 980px. I believe your site uses 990px.
Alternatively, you can set your container to have table-like layout with display:table;. This way it will stretch dynamically according to the width of its content. In this case, there's no need for any width declaration.
Step 2
Remove the fixed margins from your #header and #content elements. They are redundant and distort the position of the whole layout. The parent #site-container will have enough margin for them both.
You should use margin-left: auto; margin-right: 0 to make block element to center, not fixed margin values.
Related
I've tried to align last div element / elements using text-align-last property but it didn't work. I have much divs in the center, but my page is different on each resolution so I can't control if elements will be perfectly and none of them will be in last line alone or so, that's why I want to align them to left.
Fiddle: http://jsfiddle.net/ecn8c0pt/
Picture of my site:
Adding the following CSS will work.
http://jsfiddle.net/ecn8c0pt/1/
#gallery h2{
margin: 0;
height: 80px; /*Added height for the Heading */
font-size: 1.1em;
font-weight: 300;
color: #33CCFF;
}
.project{
display: inline-block;
margin: 0 15px 40px;
width: 156px; //To show in jsfiddle i reduced the width.
text-align: left;
float: left; //MUST CHANGE: Once you align left it will automatically float to left. Also the number of count per row will depends on the window width and div width.
}
.project .thumbnail{
width: 156px;//To show in jsfiddle i reduced the width.
height: 144px;
border-radius: 3px;
}
try adding styles to your CSS like these:
float:left;
min-width: 200px;
max-width: 200px;
and try to fix the width for the wrapping div tag
for example:
.wrapper {
width:1000px;
}
see in example DEMO and try to predict the width now when you control it good luck!
JSFIDDLE DEMO
.btn {
text-transform: uppercase;
position: relative;
margin-bottom: 15px;
color: #ffffff;
background-color: #000;
padding: 25px 80px 25px 80px;
font-size: 18px; }
So I have this image, which is responsive and button over it which should be always centered.
If you move the window width, you'll see that image changes size quite a bit and I would like to know what is the best way to set button so it will change size automatically with image as well so it gets bigger/smaller?
Is there a better solution for this besides setting a lot of #media queries here?
Since you're using absolute positioning you can't currently use margins to achieve this.
However, if you use a new div that wraps the anchor, set it to position: absolute and then center the anchor inside that, it'll work.
<div class="logo">
<img src="http://s13.postimg.org/9y14o777r/imgholder.png" />
<div>Register</div>
</div>
.logo div {
position:absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
padding-top: 25%
}
.logo a {
display: block;
margin: 0 auto;
width: 250px;
}
Fiddle
You can adjust the sizing and vertical centering as you need, and add some responsive css or min-width to control too-small sizes.
I want to create two DIVs, a container DIV (which contains arbitrary content) and an arrow DIV which allows the user to scroll the content horizontally.
Ignoring the Javascript aspect, the basic layout and CSS could be something like:
<!DOCTYPE html>
<html>
<head>
<style>
.outer-wrapper {
min-width:275px;
overflow: hidden;
border: 1px solid #000000;
height: 40px;
}
.container {
width: 90%;
min-width:100px;
margin-left: 0.5em;
margin-right: 0.5em;
height: 40px;
overflow: hidden;
white-space: nowrap;
float: left;
}
.inner-content {
margin-top: 10px;
white-space: no-wrap;
position: relative;
display: inline-block;
white-space: nowrap;
}
.inner-element {
display: inline-block;
}
.arrow {
margin-top: 12px;
min-width: 30px;
font-size: 10px;
text-align: right;
margin-right: 2px;
}
</style>
</head>
<body>
<div class = "outer-wrapper">
<div id = "container" class = "container">
<div class = "inner-content" id = "inner-content">
Options Options Options Options Options Options Options Options Options
</div>
</div>
<div id = "arrow" class = "arrow">
▶
</div>
</div>
</body>
</html>
Here's a jsfiddle link showing the rendering: http://jsfiddle.net/RSTE9/1/
The problem I have is that, ideally, I'd like the DIV containing the arrow to be as small as possible, so that most the width of the screen is comprised of the container DIV.
To achieve this, I thought I'd set the container DIV to a width of like 98%, and the arrow DIV to a width of like 2%. Unfortunately, this causes the arrow DIV to wrap to the next line on smaller screen sizes.
The essential problem is that I want the arrow DIV to always take up a very small portion of the screen, but I can't find a way to do this using percentages. If the screen width is large, the arrow DIV always takes up too much space. But if the screen width is very small (say on a mobile device), the arrow DIV might be pushed to the next line. I played around with different percentage values, but there's seemingly no way to get an ideal value. I settled at a width of 90% - this looks good on small screens, but on a large screen it means the arrow DIV is taking up 10% of the screen!
I was thinking of using CSS3 media queries to adjust the percentages dynamically, but I am wondering if there is some easier solution that I'm just not thinking of.
I would suggest that using css calc would be the answer:
CSS Calc on MDN
give the arrow div a fixed size and the container a calc(100%-30px):
.container {
width: calc(100%-30px);
min-width:100px;
margin-left: 0.5em;
margin-right: 0.5em;
height: 40px;
overflow: hidden;
white-space: nowrap;
float: left;
}
Here is an example on jsFiddle:
http://jsfiddle.net/RSTE9/5/
Notice I removed a few of the options options so you can see the effect better.
You do have a minimum width on the main container, which prevents more collapsing.
Why not set width of container as "*"?
.container {
width: *;
min-width:100px;
margin-left: 0.5em;
margin-right: 0.5em;
height: 40px;
overflow: hidden;
white-space: nowrap;
float: left;
}
jsFiddle: http://jsfiddle.net/RSTE9/6/
seems like you messed a bit with float , display and white space.
display and white space is a good clue, width a little less.
the idea is:
set the block container width no width nor overflow, but margin and white-space,
for inner content, reset white-space to normal , use display instead float.
Set min-width to text-content (100% - margin given to container)
Finally , vertical-align on both inline boxe containers text + arrow.
.outer-wrapper {
min-width:275px;
white-space: nowrap;
margin:0 1%;
}
.container {
min-width:98%;
margin-left: 0.5em;
margin-right: 0.5em;
min-height: 40px;
vertical-align:middle;
border: 1px solid #000000;
display:inline-block;
white-space:normal;
}
.arrow {
font-size: 10px;
width:1em;
text-align: right;
display:inline-block;
vertical-align: middle;
}
http://jsfiddle.net/GCyrillus/2e3du/1/
Hi I am having trouble getting a div to stay in place when the window is resized. It overlaps the content div when its made smaller.
#content
{
width: 70%;
height: 800px;
margin-top: 50px;
margin-left: auto;
margin-right: auto;
background-color: #202020;
padding: 30px;
}
#login
{
float: right;
margin-right: 20px;
margin-top: 50px;
background-color: #4A4344;
width: 200px;
height: 220px;
text-align: center;
}
I tried to set the values to em and percentages but I cannot seem to get it working.
Thanks for any advice.
This is because the content div's width is set to 70% of the browser's window, and will ignore the login div entirely. Try instead to float both the elements. If you set both element's css to float: right;, put the login before your content in the html, and remove the width property from the content's css, then it should view how you want it.
Try white-space: nowrap
I'm working on a browser-compatible navbar with rounded corners using DIVs and rounded images. I had it working perfectly in FireFox, only to discover that IE butchers it (of course).
The only problem I'm having now is getting my content DIV (navBody) to stretch to match the height of the side images. In both browsers now I have this:
http://img80.imageshack.us/img80/5088/40128898.jpg
<div class="navWrapper">
<div class="navLeft"></div>
<div class="navBody">
Login/Register
</div>
<div class="navRight"></div>
</div>
.navRight
{
float: left;
width: 12px;
height: 25px;
background: url('/images/nav/tabright_off.png');
}
.navLeft
{
float: left;
width: 12px;
height: 25px;
margin-left: 3px;
background: url('/images/nav/tableft_off.png');
}
.navBody
{
float: left;
background: #DDDDEE;
white-space: nowrap;
font: bold 12px Verdana, sans-serif;
padding-top: 5px;
overflow: hidden;
}
.navWrapper
{
float: left;
height: 25px;
display: inline;
}
I tried adding 5px padding-bottom to navBody, but this only works on FF and not IE due to box model issues. Setting navBody to a fixed height (tabs should be 20px high) seems to do nothing. Any ideas?
Try adding a
<br style="clear:both" />
To the bottom of the navBody div and see if that helps things.
Not sure why adding a height of 20px in the CSS isn't working (on navBody), that would be my first guess. You could instead try making it height: 25px (to match the sides) but then change the line-height to push your text down (instead of the padding-top).
Another option (that would change the actual design of your nav) would be to set a width on all the nav items. Rendering engines in general prefer to have width set on any floated elements.
Found the issue - FireFox was adding the padding-top (5px) to the 20px height I set to get a total of 25px; IE was not so the height stayed at 20px. Fixed it by making the height 25px by default and compensating in Firefox by cropping out the overflow in the wrapper div.