Im trying to do some horizontal layout of divs but get an unwanted "margin" after the divs.
http://jsfiddle.net/Yzxpu/
When I change the the markup and delete the spaces or line breaks the problem gets fixed for the horizontal spacing, but still there is vertical spacing under the divs. And the markup looks bad.
http://jsfiddle.net/Yzxpu/1/
I don't want to see any red (except for the far right, it will get fixed as the right-margin % gets set)
I'm using latest Chrome as web browser.
By adding: margin:0; and padding:0; to the CSS it fixes the vertical issue, because browers add their own default settings you would be advised to use a reset.css sheet to set everything back to 0.
The fiddle with the fix: http://jsfiddle.net/ynemx/
Reset CSS: http://meyerweb.com/eric/tools/css/reset/
TRY THIS
http://jsfiddle.net/Yzxpu/10/
CHANGE YOUR CSS
#t-newsAndInfo{background-color:red; overflow:hidden}
#t-newsAndInfo div {float:left;}
REMOVE "DISPLAY" FROM #t-newsAndInfo div
You could try to float:left the inner divs:
http://jsfiddle.net/Yzxpu/15/
#t-newsAndInfo{background-color:red; overflow:hidden;}
#t-newsAndInfo div {
background-color:lightyellow;
display: inline-block;
float:left;
position: relative;
width: 31.11111111111111%;/*((900-(30+30))/3)/900*/
height: 100px;
text-align: center;
/*margin-right: 3.111111111%;*/
/*margin-right: 2.99999999999%;*/
}
Related
I have the following site that is using a CSS sheet I inheritated from the last dev.
http://bit.ly/1m0LZjZ
Everything seems okay except for the menu. Originally in the #nav (Line 381 of the style sheet) CSS the width was a fixed 960px. I changed this to 100% by user request and now cannot get the text to center?
I used text-align:center and also commented out the ul elements use of float:left thinking that was the problem. What else can I try?
You need to center the wrapping div, which has width: 950px.
#menu-main
{
margin: 0 auto;
overflow: hidden; /* to clear floats */
}
EDIT: Think about clearing your floats in #menu-main.
For example you could add overflow: hidden on #menu-main, that would clear containing floats.
I am working on the following website http://bestofdesigns.be/studioregenbogen/index.html.
Can somebody please look at the css and tell me why the footer is not attached to the content and why there is a gap between the menu and the contentwrapper?
I have looked at this for 2 days and cannot seem to find what goes wrong.
Thanks,
Ben
#footer p {
padding-top: 5px;
margin: 0;
}
why there is a gap between the menu and the contentwrapper?
The gap is due to the margin applied by default by each browser to the list <ul> element and the title <h1>.
Remove it or adjust it
Screenshot
hi now give to #footer overflow:hidden and give to your footer p tagmargin :0;`
as like this
#footer{
overflow:hidden;
}
#footer p{
margin:0;
}
I am suggesting one more thing did you ever opened your design using firebug and checked how your middle content looks. It's bad design. Use div tags extensively don't use padding much.In the body style put text-align:justify property.
Your error is in
#footer p {
padding-top: 5px;
margin: 0;
}
Divide the content wrapper class into two vertical div classes and then divide the below vertical classes into another two vertical classes. Divide the first vertical tag into two horizontal div classes. In that put your image in first horizontal tag and in second your paragraph. In the bottom vertical class your second paragraph.
I've been searching around for a while (for the answer) with no success, so I guess I did "my homework"...
So basically I've a gap between 2 divs.
You can see it here.
on your content class
.content {
background: url("panel.png");
padding: 0;
margin: 0;
float: left; /*new style*/
width: 100%; /*new style*/
}
Give overflow:hidden to your .bigtext, like this:
.bigtext{
overflow:hidden;
}
This problem is called "collapsing margins".
Check this http://reference.sitepoint.com/css/collapsingmargins
http://www.w3.org/TR/CSS2/box.html
The gap is caused by the p element.
You need to take the margins off - browsers default behaviour is to add 1em before and after the paragraph.
If you use google chrome, you can right click and goto inspect element. From there you can see what default behaviours have been applied to certain elements on the page. You can even see visually what space has been created by margins. Your gap was one of them. =)
See screenshot below - this is showing the margin applied to another p element.
Try margin: 0; for those divs.
you can hack it by applying margin-top:-23px to the .content div
I want the picture plus the gray background to be centered.
The body's style is set like this:
body {margin-left:auto;margin-right:auto;width:1000px;}
The div for the picture is this:
{width:auto;margin-left:auto;margin-right:auto;float:right;}
The image style is this:
{border:0px;padding:0px;margin:0px;}
If I removed the float the gray border around the image will fill all the page. and I do not want to specify a certain width for the border because some images are big and some are small.
I need help centering the image!
Add text-align: center to #chpheader, and remove float: right.
Add display: inline-block to <div style="text-align:center;background-color:#DCDEDD;margin-top:20px;border-radius: 20px;">.
If you need IE6/7 compatibility, instead add display: inline-block; *display: inline; zoom: 1.
You should not be using inline styles.
image style should be margin:0px auto not just margin: 0px
I need the menu (home, portfolio, services, about) is aligned in the middle and left.
The div#header-login should be flush right
How can I accomplish these tasks?
To solve the first problem, I put the divs with display: inline; but for some reason the ul#header-menu is leaving a space at the top
To solve the second problem, I tried to put the div#header-login with 100% width and thus align the text to the right but failed.
Here is the complete code:
The easiest way to achieve this is to make sure you float everything in the header. With the current mix of some float and some non-float (plus some elements with display:inline), this will be tricky to manage and potentially problematic if you need this to work in older versions of Internet Explorer.
I've made a few small modifications to your jsFiddle. This now floats the 3 elements in the header and applies float clearing to the header div itself so that the content after the header clears properly (there are also commented examples of how you'd need to do this for the IEs with conditional stylesheets).
http://jsfiddle.net/y4Qyw/1/
I've not tweaked the spacing specifically, but it should be a formality now to position everything where you want with some padding and/or margin. Automatic vertical positioning in this situation isn't possible unless you're working with display:table-cell (which isn't entirely cross browser), so you'll just need to vertically offset your menu downward to get it centre-aligned.
Here is the deal:
div#header
{
clear:both;
overflow:hidden;
}
div#header-login
{
text-align: right;
overflow:hidden;
float:right;
margin-top:-30px;
}
img#header-logo
{
display: block;
float:left;
}
ul#header-menu
{
margin: 0 auto;
padding: 15px;
display: block;
list-style-type: none;
overflow:hidden;
}