The problem I'm having is I have two divs at the top of my page, one contains a repeating blue background, the other contains a background image.
I have to set the height of both divs in order for them to expand vertically, the don't expand with the content. I have that form on the right hand side set to overflow. Which I believe is what's causing the problem.
I have tried not having the height css in the code, but it still won't expand vertically.
In order to get the backgrounds to even show up I have to manually set the height.
This is the page: http://www.repipespecialists.com/landing/google/repiping.html
This is the CSS code:
#top_container {
width:100%;
height:1040px;
background-image:url(../images/top_bg_repeat.jpg);
background-repeat:repeat-x;
background-color:#83b4e9;
}
#top_header {
width:1200px;
height:1040px;
background-image:url(../images/header_bg.jpg);
background-repeat:no-repeat;
background-color:#83b4e9;
margin: 0 auto;
}
I agree with WDan in that the issue you are having is due to your use of float: left and float: right on the left_content and right_content div elements.
When you use float on an element, you are basically removing it from the normal flow of the document. By default, elements will appear on the page in whatever order you specify in the markup. Using float (or things like position: absolute) will remove the element from this "order", or "document flow", such that the floated element will be ignored when placing other elements in their default position on the page.
Since the space used by these floated elements are ignored, the top_header div does not take the floated element's size into account when determining its own size. This is why your div is not automatically expanding.
Another alternative to float is to use display: inline-block. Here are some links you can read to learn more about the differences:
http://www.ternstyle.us/blog/float-vs-inline-block
http://www.onderhond.com/blog/work/inline-block-vs-float/
http://designshack.net/articles/css/whats-the-deal-with-display-inline-block/
http://robertnyman.com/2010/02/24/css-display-inline-block-why-it-rocks-and-why-it-sucks/
I think the problem is you use float in 'left_content' and 'right_content'
Use “overflow: hidden” in the wrapper div.
Related
I'm confused in some CSS trick. The scenario is painted below. In the 2nd container is a plugin like http://workshop.rs/projects/coin-slider/
I want to move that 2nd container up (the green one), to be connected with the menu bar. The purpose is, I want the Image Logo overlaping the 2nd container. How can I achieve that ?
I tried simply set the negative value of the margin-top property of the 2nd container but it causes that the div's are moved.
This should do it:
#container-2 {
display:block;
position:relative;
top:-0px /* <-- Put actual value here */
}
It would be easier if you could post you css code.
Somes possibilites:
set "image logo" margin-bottom to a negative value and make sure container#1 height isn´t preventing the bottom container go up.
or set both containers position: absolute and then set property top to match the desired result.
I would go for a position: absolute for the image logo.
I am designing a website for my client and do not have much experience in web design and CSS. I also want to design it in standard CSS way.
The question is I am quite confused with CSS align property and float property. I know there is much difference between these two properties but I am still not able to handle it correctly at the time of development.
Can anyone explain to me the exact difference between these two properties?
"text-align" applies to the content of a box, while "float"
applies to the box itself.
Align - You use align to align text and other items rather it be left, right, centered, or justified. Align DOES NOT remove the item from the document flow.
Float - Floats an object to the left or right and REMOVES it from the document flow. (i.e. A thumbnail image with paragraph text flowing around it -- you will usually need to set some margins on the image so it looks right).
You will most likely be using float to lay the page out. I would suggest the useage of a grid system. Here is the easiest, most compatible grid system I know of to date. http://webdesignerwall.com/trends/960-grid-system-is-getting-old
Also you will need to understand what using the classes "first" and what the CSS clearfix does. You will also need to understand generating a baseline grid (vertical grid, not just horizontal) so that all elements not only line up left to right but up and down as well.
First I would like to suggest that you refer to the Head First series of CSS and HTML by O'Reilly publications. This is a must read book for those new to designing.
So, the float property is used to move a lot of blocks (for example your sidebar, your content area etc.) and the HTML align thing you are talking about, you can do the same in CSS in this way.
.test{
text-align: right;
}
The above code mentioned will be CSS and equivalent HTML code will be.
<div class="test"> This text will be aligned from right </div>
For the time being refer to O'Reilly head first with HTML AND CSS, will help you a lot.
If you give float to the child div then the parent div becomes independent of the dimensions of child div i.e., the parent div will not increase its width and height automatically.(If you haven't given any dimensions to the parent div then it inherits width:0 and height:0)
Many designers face problems because of float because it is not friendly with layout but it is very useful.
We can make the float friendly with layout by using css selector :after.
whereas if we give Text-align to the child div , the parent div will not be affected.
This is all I know.
align is a property to align a single element for table , text, span etc
float is a property to align block level elements like sidebar, div etc
text-align applies to the text in the container, while float applies to the container itself.
Example:
div {
width: 100px;
height: 100px;
background-color: lightblue;
}
.textAlign {
text-align: right;
}
.float {
float: right;
}
<div class="textAlign">text align example</div>
<br>
<div class="float">float example</div>
My page looks like this: http://ink-12.terc.edu/index.cfm
I want to get the picture (kids' drawings) on the left to follow the rest of the centered content, when the window expands:
Per the suggestions I found in other answers, I added an outer div (#maincontent) to hold my two divs that I want to scroll instead of wrap (#tbltframe and #drawings), and some additional coding (overflow:auto; display:inline-block; white-space:nowrap).
Now my page looks like this:
http://ink-12.web5test.terc.edu/index.cfm
So now it doesn't wrap (great!), but it cut off my drop shadow on the right side (you can still see it on the bottom). And I need to get the main content centered again (following the centered header and footer)--similar to the first webpage I listed. After the changes, the main content aligns left. I tried adding margin-right and margin-left:auto, as well as text-align:center, but neither did it. I also added a min-width, which doesn't seem to do it either. I can see the drop shadow again when I change the min-width to something significantly larger (74em), then but I don't know why, because #tbltframe (50em) and #drawings (14em) = 64em total.
Any help would be very much appreciated. Suggestions to move forward with the code on either webpage I listed would be fine. Thank you!
Please try the below css on skeleton.css line 64
#maincontent {
display: inline-block;
overflow: auto;
white-space: nowrap;
width: 1169px;
}
It will increase the width of the main content div so the images will not cut from sides..
Found a solution: http://www.search-this.com/2008/08/28/lets-all-get-inline-in-a-block-in-a-block/
Have to:
Create a min-width or width on the outer div (#maincontent)
Make #maincontent a block element with display:block
Center #maincontent with text-align:center
Make the inside divs (#drawings and #tbltframe)not wrap in #maincontent with white-space:nowrap;
Make the inside divs inline block elements with display:inline-block
Then make the text inside wrap again (if you want) with white-space:normal
recently i asked this question: overflow (scroll) - 100% container height about how to achieve a vertically scrolling div with variable height.
a very helpful user provided a solution using absolute positioning and height:100%, here: http://jsfiddle.net/TUwej/2/. in this fiddle, you can see the basic desired behavior - the scrolling div will fill the height of the main container as is determined by the content in the '#main' element.
i modified this somewhat and used top:0 bottom:0 instead of height:100% to accommodate an element above the scrollable area. the modified version can be seen here: http://jsfiddle.net/N6muv/3/ (i realize there is a little extra markup and class definitions that are empty, and an adjacent sibling combinator that appears redundant - these are vestiges of the actual structure)
everything is fine, except that i had to supply a fixed top coordinate for the scrolling div (note the top:120px declaration for the '.sidebar-list' selector). i'd like this to be relative to the '.sidebar-options' element above it, so that the options container above can have any number of options and the scrollable div will position itself appropriately. using fixed coordinates, if any options are added or removed, either overlap occurs or unnecessary space develops - i'd like to avoid this. the exact number of options that should appear varies between views.
i had thought to wrap the scrolling div in a relatively positioned container, but doing that creates a conflict with bottom:0 no longer indicating the height of the main '.wrapper' container (which it should do). similarly, using height:100% will use the computed height of the '.wrapper' container so the scrollable div will extend beyond the boundary of the '.wrapper'.
is there a way to keep the functionality shown in the second fiddle, but with the top of the scrollable div relative to the bottom of the options div (which will be of variable height)?
thanks in advance for any suggestions.
EDIT: S.O. asked if i wanted to start a bounty, so i did (first time) - hopefully 100 pts isn't considered too low. still looking for a no-script, pure-css solution that doesn't involve fixed coordinates or dimensions for the y-axis (width and left assignments are OK). thx
UPDATE:
Import JQuery:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
New Demo:
http://jsfiddle.net/Mutant_Tractor/N6muv/28/
Add this nice little JQuery script to your page:
var contentColHeight = $('.content').height();
var optionColHeight = $('.sidebar-options').height();
var newHeight = contentColHeight - optionColHeight;
$('.sidebar-list').height(newHeight);
OLD
How does this suit your needs?
http://jsfiddle.net/Mutant_Tractor/N6muv/4/
I changed position:absolute; to position:relative and added a static height:190px as well as adding background:pink; (so the bg always looks right)
You can try adding and removing Options from the list above to demo this.
Full code:
.sidebar-content {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background : pink;
}
I believe you should remove absolute positioning on the inner elements and try overflow:auto.
You need to define the height of the sidebar list coz you have to set this content to scroll-able and min or max height must be defined. And you could set .sidebar-list{position: relative;} See this Fiddle
Edit Your .sidebar-content should also be relatively positioned See this Fiddle whatever your 'options' content contains.
When I try to move the div #planet up (I change margin-top from -76px to -86px) my whole site "lifts up".
You can view the page here (and see the problem) http://rssreaderbg.net/pubsubbub/example/cssexam/index.php
It's because a div is a block element, so it stretches from one end to the other. So when you change the top of that particular div, you're changing the tops of all the following divs.
See the trick (an oldie but a goodie) at the bottom of this page http://css-tricks.com/the-css-box-model/ (as a for instance) to see how this works and to find out how to duplicate it for yourself.
try to add height parameter to "icons" div... when you change that margin now, size of parent div(icons) is affected and whole site moves up because that div changed height
just apply padding-top:10px; for the #container
Remove all margin of the class .iconss
Use position:absolute on #icons and set the position:relative in the class .iconss
Now, use top and left css property to set the icon position.
Cleber.
id=icons are above the id=nav. When you edit the top margin of an element in id=icons it effect id=icons. When id=icons goes up the others goes up too. I suggest you to use position css for icons and nav too.