CSS Height Messing Up [closed] - css

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions concerning problems with code you've written must describe the specific problem — and include valid code to reproduce it — in the question itself. See SSCCE.org for guidance.
Closed 9 years ago.
Improve this question
I am having a terrible time getting my height of my DIVs to properly scale with the height of the DIV's containted inside of them. Currently the DIVs that contain other content DIVS are not set to any specific height, but for some reason they have a height way beyond the content that is contained in them (which currently isn't anything)
Here is the link:
http://www.brockpatterson.com/secret.php
As you can see, the 1st blue area is super tall, and the lighter blue area below is the same. I'm not sure if some other CSS element is messing with it. I've been looking at it and messing with different perameters for a few hours now.
Thanks,
drummer

#content_container is set to 100% height. Remove that and you'll be fine.

Why do you have height: 100% at #content_container?
(Also, you should never have two HTML elements with the same ID...)

Related

Display a div above a grid grow [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed last month.
Improve this question
I have a display grid with multiple rows and multiple columns, I am trying to make a div display when I hover over one of the grid boxes, but right now it is being cut off by a grid row. I want it to lay over the design.
I have tried position: absolute and z-index, but that does not seem to work. What other ideas can I try?
in addition to using absolute and z-index you should probably position the div you want to display over the others in the largest parent div. If you are able to provide your html and css I can be more precise

Irregular bootstrap3 grid, one column out of container [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 5 years ago.
Improve this question
I'm seeing some crazy layouts sometimes. One of them is layout where we have boostrap container that has max width, let's say 1120px.
One of columns has 50% width of container, and the second has 50% width, not container but browser.
I've attached 2 screens to clarify my question - and the question is: does anybody has claver solution, that is responsive and will not break things during resisizing ?
So, 2 columns will not collapse ?
I will not provide html / css code, as i have no idea, how to code this right and without javascript.
If any of You have any ideas, i'm saying "thanks for a tip :)"
you can use width: calc() to calculate any width you want.
quick example
https://codepen.io/kupas/pen/Yepadv
PS: for smaller screen use mediaqueries

Browser window is bigger than my html/body tag [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
http://lillangshamnens.philipnordstrom.com/
Hello!
I need help because my browser window is bigger than my html/body and because of that i get a scrollbar at the bottom.
Im using wordpress and bootstrap
That's because you have an iframe element that has a fixed width of 1280px. Try to set the max-width:100% property to it. Also the bootstrap rows have a negative margin set on them. You may also want to reset that.

my div are positioning different in different browser [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question appears to be off-topic because it lacks sufficient information to diagnose the problem. Describe your problem in more detail or include a minimal example in the question itself.
Closed 9 years ago.
Improve this question
Am making changes on a home page. i have background images and links to the image as buttons.
However when creating divs for each image i found out that the best way was to add div for each image as that will allow me to position the images side by side. i was told to use a class, however with class i would not able to put images side by side.:
this is my finished page as you can see the 7 images on the middle of the screen.
however if you open this in Firefox it comes out all messy :/
what is the best solution for this to have it positioned like the link i provided. but in all browsers. is divs the best way?
This is my js fiddle with the code: http://jsfiddle.net/uJhvk/
e.g
<div id="testimage">
<div id="a1">Awards</div>
</div>
any help will be grateful.
http://jsfiddle.net/ahallicks/uJhvk/1/
I've added floats to #testimage2-6 and margins to the last two to space them out
float: left;clear: both;
on #testimage2 to make it sit on a new line

Non-responsive site will not resize to fit mobile browsers [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions concerning problems with code you've written must describe the specific problem — and include valid code to reproduce it — in the question itself. See SSCCE.org for guidance.
Closed 9 years ago.
Improve this question
I'm trying to take a template that was designed to be responsive and make it "unresponsive."
http://myhurlburt.com/NEW/bowling.php
The width of the page is set to 960px. When I view it on an iPad or iPhone, you have to scroll to the side to see the entire page. Do you know what in my CSS is causing that? I would like the entire site to "fit" into a browser so the user does not have to scroll to the side.
It's a big job to change an unresponsive site to a responsive one.
But you could try something like this to get started.. .wraper currently has it's width set to 960px.
.wraper{
width:100%;
max-width:960px;
}
use % for width, height and other margins. Use media queries also. If not, do zoom:1(2,3 or something);
Start by scaling the website with min/max widths and additionally use percentages instead of px.

Resources