Live site.
Toward the bottom of the page "Parlour Policies" is floating in the middle of the page, though it should be styled according to this:
.content {
height: 100%;
padding-bottom: 40px;
padding-left: 20px;
width: 600px;
}
Any ideas what's causing the location shift? I didn't see anything in Firebug, and the few validation errors(which I'm working to fix right now) all pertain the WP generated header and don't negatively effect any of the other <div class="content"> on different pages.
Just add overflow: hidden to .content - it will clear your floats
.content {
height: 100%;
padding-bottom: 40px;
padding-left: 20px;
overflow: hidden; /* this */
width: 600px;
}
Related
Codepen link: [removed for privacy]
(Ignore the search button, I am mainly concerned with results displayed within it's parent element of #results_container).
On the actual app, results will be generated based on a search term,
I have the overflow set to "scroll", but as you can see, the bottom result still overflows. What gives?
#results_container {
height: 430px;
overflow: scroll;
margin-top: 5px;
}
The unwanted "bottom result still overflows" seems to be due to the height: 100%; CSS definition for the #wrapper div.
If you remove "height: 100%; from #wrapper, I think you'll see the results you were looking for.
Also, notice that the #wrapper div expands and collapses as the browser's display is expanded and collapsed. Once the height: 100%; is removed from #wrapper, the #wrapper height does not change.
I made a fork from your codepen.
#sidebar {
border: 1px solid black;
width: 40%;
margin-top: 22px;
height: 93%;
overflow-y: hidden;
}
#results_container {
height: 430px;
overflow: auto;
margin-top: 5px;
}
Here the full example: codepen fork
I'm trying to make a simple menu for my home server web platform for multiple screen resolutions.
Complete Example
#menu-area{
position: absolute;
text-align:center;
margin-left: 15%;
margin-right: 15%;
width: 70%;
min-height: 50px;
}
.menu-box{
display:inline-block;
height: 50px;
width: 150px;
font-size: 25px;
line-height: 50px;
text-align:center;
}
My idea was that, as the screen gets narrow , the menu links rearrange themselves, and transform from a line to a column. That part works as intended.
However when the menu gets more than 2 lines long vertically, it starts to overleap with the content display area.
I can't figure out, how to strech the div containing the menu-box -es to contain them, so the content area can get pushed down and not overleap with the menu.
P.S.: If possible I only want to use html and css for this layout.
If you comment out these lines in CSS - it works:
#head {
/* min-height: 200px; */
/* height: 15%; */
#menu {
/* height: 50px; */
#menu-area {
/* position: absolute; */
/* min-height: 50px; */
I have created a website however when I shrink the browser the website stays in position, apart from the form.
If anyone know's how I can stop the form from moving, I will be very grateful.
I have tried position: relative and white-space: no-wrap; but still no luck.
Thanks in advanced
Unique
My Code:
http://jsfiddle.net/r5cu1157/
#form-holder {
float: left;
width: 400px;
height: 400px;
padding-left: 100px;
padding-top: 30px;
display: block;
*display: block;
white-space: nowrap;}
If you want the form to be center aligned then do a
Margin: 0 auto;
remove the float left and i would suggest to stay away from specifying a height of elements
http://jsfiddle.net/r5cu1157/1/
This is the CSS that I have for my container that holds my table and forms, could try using it for your form, I believe it is a mix of position and margin:
.container
{
position: relative;
top: 250px;
background-color: #877CB0;
margin:0 auto;
text-align: center;
}
I am trying to convert a three-column web-page layout from HTML tables to CSS, but there is one characteristic which I have so far been unable to replicate.
The HTML solution allows a photograph to be placed by php into a column to the right of the main text, but in the absence of a photograph, that column collapses, and the main text content extends up to a final right-hand 'spacing' column to maintain a right-hand margin.
So far, the only way I have found of achieving the three-column array in CSS is to use a container of fixed width, and to use fixed width styles for the div tags defining the columns, together with floats. The basis of the HTML code is:
<div class="container">
<div class="title_strip"><img src="headline_text.png"></div>
<div class="hdr_img_space"><img src="leaf_header.jpg"></div>
<div class="lh_col"><p align="center">ADMINISTRATION<br/>[WEBMASTER]</p></div>
<div class="main_content"><p>This is the location for the main administrative page
content, and will hopefully be able to contain all the necessary text, even if it
over-runs</p></div>
<div class="rh_image"><img class="rh" src="photo.jpg"></div>
<br style="clear: both"></div>
and the core CSS styling is:
body {
margin: 0px;
padding: 0px;
background-color: #200542;
}
p {color: #CCCCCC; font-family: arial, sans-serif; font-size: 14pt; line-height:1.4em
}
.container {
width: 1000px;
min-height: 600px;
max-height: 2200px;
margin: 8px auto 0 auto;
background: #333333;
padding: 0px;
}
.main_content {
float: left;
min-height: 600px;
max-height: 2000px;
margin-left: 0px;
width: 516px;
padding-top: 20px;
background: #333333;
}
.lh_col {
float: left;
width: 200px;
min-height: 600px;
max-height: 2000px;
padding-top: 20px;
padding-left: 20px;
padding-right: 24px;
margin: 0;
background: #333333;
}
.rh_image {
width: 200px;
min-height: 620px;
max-height: 2000px;
float: right;
padding-top 20px;
padding-left: 20px;
padding-right: 20px;
background: #333333;
}
img {
display: block;
}
.rh {
margin-top: 40px;
}
Because the columns are fixed width, the removal of the image tag leaves a wide gap to the right of the main text, and none of the suggestions I have found in web searches shows a satisfactory solution - generally the collapse of the right-hand column leaves the text layout in the centre column unchanged, despite the apparent availability of more space.
I want to avoid solutions which would give problems with browser compatibility - is there any way of achieving what I want in CSS, or shall I have to persist with the now deprecated use of the HTML table tag?
Peter N.
If I understand correctly, what you need is if there is no image in the right column, your main content should be without "gap", or complete layout should look like 2-column page, if so try this:
first thing is to move your
<div class="rh_image"> before
<div class="main_content">
next just adjust css like this:
.main_content {
min-height: 600px;
max-height: 2000px;
margin-left: 0px;
padding-top: 20px;
background: #333333;
}
it should do the trick
Sorry I just saw your fiddle
here's the link with the complete code: http://jsfiddle.net/darkosss/3deMj/
I have some div containers which expand when the 'view recipe button is clicked, but all 3 across the bottom will hide underneath the footer container, i'm unsure which element to alter to have the expanded containers appear above and not underneath.
live url: http://bit.ly/1hQuzRI
I've attached the css of the elements which are appearing underneath the footer and some from the footer too. I can paste the html but there is loads which will end up showing up. maybe best to just view direct on site.
.box2-container-collapsed {
padding: 10px;
width: 270px;
height: auto;
background-color: #F5F2E9;
display: block;
float: left;
margin-right: 20px;
margin-top: 20px;
position: relative;
}
.box2-content {
margin-left: 0px;
font-size: 0.9em;
min-height: 200px;
display: none;
}
#footer {
background-color: #F3F3F3;
padding-top: 10px;
padding-bottom: 0px;
bottom: 0;
position: relative;
margin: 0 auto;
width: 100%;
}
Set the z-index in the footer to a negative number. Also try setting the z-index for the div that expands to a higher number.
Edit:
Your div with the class="content-container" has overflow:hidden. I removed that in my Chrome-Dev tools and the expanding div was visible after that. Side Note: It's difficult to see where the recipe ends and the footer begins. You may want to put a light border around the recipe div, too.