I've got a div that has many listitems in a verticle rows (over 200). Depending on the screen resolution the container div should resize to fit the screen and create a vertical scroll bar and horizontal scroll bar for side scrolling - however; using overflow:auto or even overflow:scroll the list items are not cut to fit within the container div and a horizontal scroll bar is not added. So I have a container that is roughly 700px in width and listitems that are roughly 1000px wide and these list items are hanging over the edge of my container (on the right side) by 300px. What can I do to fix this?..here is my CSS for the container...
#report-box #report-text{
position:relative;
height:96%;
width:1200px;
overflow:auto;
font-size:12px;
color:#000;
margin:0px 0 0 0;
}
My listitems are styled in my HTML as follows:
<li class='_1' style='width:100%; float:left; position:relative;'>SOMEDATA</li>
You can probably set a max-height on the container.
I'm not sure what the problem was but instead of forcing that to work I made an additional container inside of the original container and specified overflow:auto to that and somehow it is now working.
Related
I have a container div which contains an element with fixed proportions (an image for simplicity, but can be a video too). From now, I'll identify the container div with container and the element inside it with element.
Requirements
Here's what I'm trying to get (possibly using CSS only, without JS)
container must be 100% of window width and 50% of window height (see height exception in requirement n.5)
element must fill 100% of container width and keep its proportions (don't have to be deformed from window resizes)
element must be centered both vertically and horizontally inside container
when element height is higher than container height, excess parts of element above and below container must be hidden
when element height is lower than container height, container height must fit element height
The goal is to essentially create something equivalent to what background-size:cover does with images, but applied to a generic element with fixed proportions.
My (partial) solution
Here's my actual code. I've managed to achieve requirements n.1,2,4 (see fiddle) but I'm still struggling to find a solution for 3 and 5. In the posted fiddle I've commented overflow:hidden property and set a border to container to better show my goal.
.container {
margin-top:100px;
border:2px solid red;
height:50vh;
display:block;
/*overflow:hidden;*/
position:relative;
}
.container>* {
position:absolute;
top:-25vh;
display:block;
width:100%;
z-index:-1;
}
Any ideas?
So basically upon resizing browser to smallest possible im still getting horizontal scroll bar for some reason. I cant have this for responsive purposes.
Any ideas?
http://www.techagesite.com/page-1work11122.htm
Another thing while im here
You will notice a email form and another div beside it with a border on it. When the browser shrinks the 2 divs collide and overlap.
Im still learning css and have tried sever approaches but nothing sticks.
Help would be greatly appreciated
The horizontal scroll bar is appearing because <ins class="adsbygoogle"> in the div #box6 has an inline width specified to 200px. To remove the horizontal scroll use the below css
#box6{
overflow:hidden;
}
EDIT: To get the desired effect as mentioned in the comment try the below css in media query for smaller screen.
The MailChimp form has width of 200px specified for its forms. This causes the right column to overlap the left section on re-sizing the window. So by setting width to the div container within the box6 and floating to left both the left and right divs will push the right section below when the screen doesn't have space to occupy both the divs side by side.
Also <ins class="adsbygoogle"> has a width of 200px given inline, so you can remove the width:45% specified for .right-column from your style sheet because this div will take the 200px width of its content.
#media only screen and (max-width: 480px) and (min-width: 321px){
#box6 .container{
width:200px;
float:left;
}
#box6 .right-column{
float:left;
}
}
I'm trying to make a menu for a mobile landing site.
The problem I'm having is that the items inside the divs are being set to height bigger than the containing div, which is screwing up the vertical align. I've tried many different things in order to manually set a height, but nothing is working. I've also tried setting margins and padding to 0. Nothing has worked.
Code:
<div id="menu">
<div><span><h4><a class="menuItem" href="find-us.html">Find us</a></h4></span></div>
<div><span>Promos</span></div>
<div><span>Events</span></div>
<div><span>Gallery</span></div>
</div>
http://jsfiddle.net/milkman15/r6VDe/1/
You can set a min height on the div and remove the css for the span inside
http://jsfiddle.net/mx28a/1/
#menu div{
font-size:2.5em;
width:93%;
height:14%;
margin-top:7%;
display:inline-block;
background:rgba(000,000,000,0.6);
text-transform:uppercase;
min-height: 60px;
}
I added the min-height as the last item. Since the divs are set using percents, when the height of the screen becomes smaller your div's height also becomes smaller. Your font are simply too large for the divs so it bleeds out when you reduce the height of the window. By setting a min-height, you can stop this from happening
.. expecting the picture to get "cropped" at the top and bottom. I only want it to fit the width 100%, and wish to become bigger than the height, but not leave the certain container.
How is that done?
Your question is a bit vauge if you meant you wanted an img to stretch to the full width off a container but the height too get cut off then you want something like this.
.container{
width:300px;
height:300px;
overflow:hidden;
display:block;}
.container img{
width:100%;
vertical-align:middle;
}
Just set the container's css overflow property to hidden, give it a fixed size, put your image inside with a fixed width, and done :)
Well, almost done. To get it cropped at the top and bottom, you need to get the image vertically centered in the box. One hack to achieve this is to have tiny text nodes on either side of the image, having a line-height the same as the container div height. Giving the image vertical-align:middle should center it vertically within your div.
I want to create a page with a horizontal centered content block that reaches from teh top to the bottom of the browser window. I already figured out that tables are not the right way to design a layout. A block that reaches from top to bottom is not the problem:
<div style="position:absolute;top:0px;width:800px;height:100%;background-color: #fff;">
</div>
But I'm not able to make this Div centered. I tried
"margin:auto"
But no effect. Th centers the text in the Div, but not the Div itself on th screen.
To center a div you need two things, a width, and automatic horizontal margins. Like this:
#myDiv {
width:800px; /* or whatever */
margin:0 auto;
}
There is no need for absolute positioning, just these two rules will do the trick.
to center an Absolutely Positioned div add left: 50%; margin-left: -400px;
where the negative margin value is half the width of the div
Try not to use position:absolute for layouts unless necessary. This sample shows best practice for horizontally centering your content.
If you need a solution that will continuously work to restrain the content area height within the viewable area, try my jQuery solution: http://jsfiddle.net/BumbleB2na/Z75hA/