Size of div changes from browser to browser? - html

Pretty simple problem here. Whenever I change browser windows the div on my code changes size. Inside the div is a list of links, in Chrome the div encapsulates all the links perfectly but in something like Firefox or Safari the div stops at about the second to last link. How do I make the div size equal across all browsers?
.test {
width: 420px;
height: 2270px;
border: 1px solid grey;
top: 50%;
background-color: whitesmoke;
position: relative;
align: center;
}
I'm guessing it has to do with how each browser interprets it, but I'm not exactly sure how to fix that.

Yes you can keep the div size fixed regarding different window size. But It depends on your need. If your div contains texts/image , you can use
overflow:hidden;
Again, Your div is getting so small for the smaller screens and thats your main concern, you can use
min-width: 200px;
In this case, even if the parent div gets smaller, child div will be the same unless the parent div becomes smaller than the child div.

Related

Centering Fixed Width Page Content

I'm pretty lost as to where to even begin so I will try to explain. I'm making a Hardware Store for my term project in Aptana Studio and am running the site in Google Chrome. Apparently, running a site in Google Chrome makes it automatically responsive? As you can see in the following screenshots, the site is fixed on the left side and responsive on the right side:
(resize 1)
(resize 2)
(resize 3)
(resize 4)
Of course, the black and white photo does not resize, but I actually don't want it to. I just want what is in the header (the logo and photograph) to stay the same size - to stay fixed on the page. Take Ace Harware's website as an example: http://www.acehardware.com/home/index.jsp
Everything in the site is constrained to certain dimensions. When the page is fully open, the content is centered and there is a margin of white space on either side. And when the page is resized (smaller), the margins start to disappear until finally there is a cutoff point - and the content does not change position anymore.
(full page)
(first resize)
(second resize - even though the page is smaller, the content is fixed)
This is exactly what I'm trying to do with my Hardware Store site. How do I achieve this effect? I've heard of bootstrap but I really don't know enough about it or which template I would use. Thanks for any help/adivce. If it's too complicated to explain here, please send me to a good tutorial you might know of.
What you're trying to do (at least, what i understood) is not a matter of "responsive". You're just trying to keep the whole page content always centered. (acehardware.com is not responsive eather).
You just need to define a constant width for the main div (the one which will contain the whole page content, except the background), and then keep it centered in the outer div, no matter the screen size.
This is what you got to do:
#main-wraper {
margin-top: 5px;
margin-bottom: 5px;
width: 360px;
height: 420px;
position: relative;
left: 50%;
margin-left: -180px;
background-color: white;
color: black;
}
#outter-div {
background-color: grey;
position: absolute;
width: 100%;
height: auto;
min-height: 100%;
overflow: hidden;
}
<div id='outter-div'>
<div id='main-wraper'>
<!-- The whole page content -->
</div>
</div>
This will keep the div centered in the parent container, and the parent container will be hidden the smaller the screen is.
I used smaller dimensions for main-wrapper in the snippet in order to make it easier for you to watch the effect in a smaller box. BUt you should use your own width. Just have in mind that the "left margin" for that div must have "half the width of the div" as a negative value. "left: 50%" will always center the div and keep the effect.

Continue div element past horizontal overflow

A JSFiddle of it: http://jsfiddle.net/24tL8mkq/3/
I want the red highlighting to continue all the way across the box.
Right now, it's set-up such that:
<div style='width: 500px; overflow: auto; border: 1px solid black; padding-top:-5px;'>
<pre id='pre_1'>
<!-- code box -->
</pre>
</div>
with the relevant css (this is the CSS that I want to extend across the entire div, through the overflow) being:
.bad {
background-color: palevioletred;
width: 100%;
}
I get that I can't use width: 100% as that'll only extend to the right most side of the overflow always, but I can't set a static width as I don't know what the size of the box could be.
I'd really prefer to keep this a HTML/CSS solution if possible just to make this as portable as possible.
Interesting problem. The following works for me in the latest Firefox, Chrome and IE11, though I'd consider this somewhat "experimental" - definitely should be further tested if you need to support a broader range of browsers.
http://jsfiddle.net/24tL8mkq/5/
pre {
display: table;
}
pre > div { display: flex; }
I wish I could tell you why this works, but I don't know. I wasn't able to find another combination that works, however. My guess: setting the pre to display: table makes it so the width will go wider than 100% (500px), as tables will do (when their children are wider than the table). Setting flex on the div children is filling the available space since all the children should be equal width.

Right-side of center-positioned div cut off on mobile

I want to achieve a menu bar whose background extends to the length of the browser window, while the actual menu is centered in the middle. I have the following CSS code to achieve this:
.menuContainer {
position: relative;
height: 60px;
width: 100%;
margin-top: 60px;
padding: 0px;
z-index: 2;
background-color: white;
}
.menuContent {
position: relative;
width: 1000px;
height: 40px;
top: 10px;
margin-left: auto;
margin-right: auto;
text-align: center;
font-family: Verdana, Sans-Serif;
color: black;
font-size: 12px;
}
This solution works fine in all major web browsers, but when I view it on iPad, the right-side of the container gets cut off at about 3/4 of the browser window. What is interesting is that, if I change the position of the container to 'fixed,' it works just fine, but unfortunately that is not what I need. I need this menu to scroll with the page's content.
Any idea what I did wrong?
UPDATE 1.:
I think I am zeroing in on the problem. After trying all your suggestions, including getting rid of the inner div, as well as playing with the width, I realized what the problem might be:
The container automatically inherits the width of the browser window, which on iPad is around 1000 pixels. But I have elements on the webpage that are wider than that, stretching the content area above a 1000 pixels. So, while the content of the webpage is stretching just fine, the 100% width element remains the width of the original browser window at about 1000 pixels and do not updates automatically like it does on desktop browsers. what baffles me, however, is why isn't 'fixed' positioning affected by this? I am trying to use min-width at the moment to fix this problem.
I hate to answer my own questions, but the problem was what I described in my update. Basically the 100% width does not update automatically on mobile browsers, meaning that, if an element is wider than the default width of the browser, 100% width elements will be cut off. I solved this by adding:
min-width: 1200px;
where the 1200px is the width of the widest element on my page.
Remove the fixed width value in .menuContainer
FIDDLE

CSS min-height based on image

So, currently I'm trying to set the minimum height for some css tabled content based on the height of the picture rather than the height of the text.
In essence, my layout is like this:
<Image #60% width> | <Text #40% width>
And I'm currently using flex boxes to do this.
However, right now, when the page is resized (I cannot use static heights as it needs to be fully responsive), at a certain point the image becomes extremely small and the text makes the container huge.
I'd like, ideally, for the text to be the same height as the image at all times and, if there is overflow, for it to be scroll based.
Here's my current Jsfiddle.
http://jsfiddle.net/D7h3z/4/
I'm not averse to using technologies that are new/experimental. I am averse to using JavaScript for this as there shouldn't be a need. And if I do need to, I don't use JQuery, so please avoid that in your answers if you can.
3check out the changes I made to your fiddle -- New Fiddle
Essentially, I made the inner span of description absolute positioned and then placed an overflow-y auto on it's container span. I the applied a min-height of 200px to the img container and it appears to be working as you described. Let me know if this isn't the case.
.description {
width: 40%;
padding: 10px;
position: relative;
overflow-y:scroll;
}
.imagebox {
width: 60%;
min-width: 300px;
}
.imagebox img {
width: 100%;
min-height:200px
}
.description span {
padding: 10px;
position: absolute;
}
EDIT Actually doesn't work 100% yet, the image doesn't maintain aspect ratio... sad trombone
EDIT 2 Added in a min-width which sorta gets it there, but from a dynamic standpoint, this is far from ideal. I will give it another look later tonight.

Div within a Div

I've got this problem, I've placed a div within a div, I've positioned the "title" to be height 50, and then "navbar" below it, so I've put height 100% though the thing is, its not staying within the div, its actually straying away from and out of the div and making a scrollbar appear.
I would love "site" to hog the walls and then all the other div fit in that div.
<div id="site">
<div id="title">TitleBar</div>
<div id="navbar">NavBar</div>
<div id="frame">FrameBar</div>
</div>
body{
margin: 0;
}
#site{
position:absolute;
width: 100%;
height: 100%;
*border: 1px solid #333;
}
#title{
border: 1px solid #333;
height: 50;
}
#navbar{
border: 1px solid #c38a8a;
width: 200;
height: 100%;
}
I've found an image that shows something similar.
http://img176.imageshack.us/img176/4637/picture1zb1.png
that's because 100% height actually means "use the same height as the container".
But I didn't quite get all your requirements for this layout, if your navbar is a navigation bar, it should be designed in a way that allows scrollbars to appear when the content is too big.
But I think you're going for the wrong structure to accomplish this, is there any actual reason you want a wrapper div? I've created a fiddle on this, check if this is closer to what you wanted: http://jsfiddle.net/6g6HV/2/
This other one is yours, in case you wanna play with it: http://jsfiddle.net/yq8PS/3/
Edit: Adding the javascript solution to the answer http://jsfiddle.net/6g6HV/9
You can make divisions in HTML appear side by side to each other by adding a float property to the css.
#navbar{
border: 1px solid #c38a8a;
width: 200px;
height: 100%;
float: left;
}
Additionally, always add the 'px' unit after a size. Modern browsers assume you mean px, but older ones might not.
There isn't a good way to prevent the overlapping when you have a sidebar that is a set pixel width. To achieve the liquid width (or fluid width) style, you would have to add negative 200px margin on the left to the #frame (to counter sidebar). Then, add another divsion inside the #frame to do the styling for that portion. This is how I have achieved the look on my web site, and it's also the solution used in the previous default Drupal theme (Garland).
#frame{
margin-left: -200px;
}
IN this context, 100% for the Navbar doesn't mean the remaining height but 100% of the visible heigth of the parent; so if the parent has a height of 400px then Navbar will also have an height of 400px. If you add to this size the height of the title bar, you get a total value greater than the size of the parent; therefore the appearance of the scolling bar.
While there is usually no problem with the width to make it appears to fill the whole length of a screen, it's very difficult in HTML & CSS to do the same with the height as they have not been designed for this sort of thing; especially with an imbricated structure (div inside div).
Some people will use Javascript to get the size of the screen (browser) and compute the size of their objects accordingly but I don't know if you can do the same with a pure HTML/CSS solution; especially if you want to have your solution compatible accross many browsers.
For more info, take a look at http://www.tutwow.com/htmlcss/quick-tip-css-100-height/