On this site the document has a large width. When I'm inspecting it on Chrome, I don't see which element is causing this issue.
There are no elements that have this width.
This is caused by mistakes in the <footer> section.
You have container which forces width inside bootstrap column. You need to remove this class. See the attachment below.
The another problem is direct child inside <section id="footer-bottom">. It is element with class row which has negative horizontal margin. It also causes unwanted stretching of the entire website.
use overflow:hidden for this .an.ccm-page
add this style in your main.css
.an.ccm-page{
overflow:hidden
}
It's due to the <section id="footer-top">. In the <div class="col-sm-3"> you have another Bootstrap .container. If you're nesting Bootstrap grids do not use the .container class again and nest like e.g. .row > .col-sm-3 > .row > .col-sm-12.
In general if you want to know why your page is too wide: Open e.g. Chrome's DevTools, scroll to the right and start removing elements from the page. At the moment the page scrolls to the left again you know which element is too wide.
Its actually because you have too many html tags mismatching in your markup, means opening tags without corresponging closing tags.
Refer: http://validator.w3.org/check?uri=http%3A%2F%2Fanitya.myconcretelab.com%2F&charset=%28detect+automatically%29&doctype=Inline&group=0
Related
The problem is (which you can see in the pictures below) that the "doner", "Wallet", and "Amount" aren't centered on the page.
I've tried changing the margin and padding and moving divs around and etc, but nothing seems to be working and I don't understand what is wrong or how to fix it. (it is hard to see in the code snippet because it's not full screen so I'm just going to give a link to the HTML here)
The only issue I can find is when I inspect element on google chrome. When I hover my mouse over <div class="container"> (the one underneath div class="learn-more">) It shows that the div container is wider on the right side, but I can't find why!
Thanks for the help! If you need any clarification please ask, I couldn't find anything to fix my problem online so I came here.
Here's a picture of what I mean as well:
The essential problem with your code is the markup. You're using the Bootstrap & putting some div directly inside the container & then another container inside this div. See what I mean:
Here are the first three rules from the 3rd Bootstrap documentation you should follow when building your HTML:
Rows must be placed within a .container (fixed-width) or
.container-fluid (full-width) for proper alignment and padding.
Use rows to create horizontal groups of columns.
Content should be placed within columns, and only columns may be
immediate children of rows.
So, my suggestion is to revise your HTML layout and use the Bootstrap as it intended instead of applying some hacks.
Start from rearranging containers in the way that the content would be put inside columns and all of the wrappers would be outside of the containers or inside the columns.
put your content that you want to center in a div like
<div class="box">your content...</div>
in your css file just add this :
.box{
display:inline-block;
position:relative;
left:50%;
transform:translateX(-50%);
}
you can also use a float left for your 3 titles and set the same witdh and height for the three with text-center proprety
I'm having issues trying to get my main container (the white background) to stretch to the bottom of the content, it currently runs in the header only. I've been racking my brains for ages, I've tried adding in a clear and also made sure that all the containers within the main container are floated but still no joy.
This is a live website and can be viewed at http://www.ridermagazine.co.uk
I've also noticed that my sidebar has dropped down below the content instead of displaying on the right-hand side, this lead me to believe that I had gotten my maths wrong but I've double checked everything and nothing seems to be out of place.
Any help would be awesome.
Thanks.
CSS code for container:
#page-wrap {
width: 926px;
margin: 20px auto;
background-color:#fff;
padding:17px;
}
The problem lies in using all the float:left directives. You don't need them if all the elements which are block elements are block elements. For example the h1 element in header is NOT a block element. It seems that somewhere is a h1 {display: inline} - e.g globally. If you overwrite this in the inspector of your browser to h1 {display: block} the white background "is growing" ;-). So my tip: remove all the float directives and start again with composing.
Remember: float is evil ;-)
Just use it if you really need to. For example if you need two main div elements live next to each other. Also instead think about using overflow ....
EDIT: the error is in div id="content". Remove float:left and it works
That's what I mean with evil float elements ;-)
Try to add:
<div class="clear"></div>
at the end of your "page-wrap" div.
A more accurate answer is
<div style="clear:both"></div>
as he did not mention if he has a class called clear
"at the end of your "page-wrap" div."
I am not very good with CSS, HTML and mark-up, but after having read many and many CSS articles, I just have no idea how to get the div-elements on the right place.
Current site in tables: http://daweb.nl/
Current attempt in div: http://daweb.nl/daweb/
I would like to have the right-menu and content in the right place. If you have general comments regarding the current state of my HTML and CSS, please feel free. I have worked with CSS, HTML much, but never built a site from scratch with div-elements.
http://jsfiddle.net/qJBpk/10/
Check the preview here.
This is a basic setup, you have a wrapper div which contain all your structure: a header, three columns and a footer.
Wrapper div has margin set to auto, this will allow it to be horizontally center placed (along with all its content) in the browser window.
The three columns have the float property set to left, so that each one is placed next to the other.
The footer has a clear property set to both, this will allow it to be placed after the most tall floated column, to avoid a layout crash.
Div elements are block level elements. This means, among other things, they take up all the avaiable width space, so no need to set a width for the #header and #footer divs.
EDIT
To avoid cross browser incompatibilities and issues, it's better to have a CSS reset (a set of CSS rules which will make all elements shows as much as possible the same across all browsers), like the YUI. Place it first before any other CSS code.
This is a good place to start learning about css positioning.
Also, after looking at your code, you may want to wrap certain elements in a wrapper div so you can position everything inside it with one CSS rule.
Instead of:
<div id="menu-header">
<h1>HEADER</h1>
</div>
<div id="menu-body">
<p>MENU BODY</p>
</div>
Try something like:
<div id="menu">
<div id="menu-header">
<h1>HEADER</h1>
</div>
<div id="menu-body">
<p>MENU BODY</p>
</div>
</div>
That way if you want to move the menu and everything in it you can write a CSS rule like this:
#menu {float:left;margin:15px 0 0 25px;}
just another one! ;-)
full-working-demo: http://so.devilmaycode.it/converting-tables-to-css-layers
hope this help!
Looks like a simple 3 div layout. You need to create 3 divs. One for the left, middle, and right-hand content. These three divs will be placed in a wrapper div.
So take your left_menu, content, and right_menu divs, give them a width and set them to float: left; so they will all be placed beside each other. Place them inside a wrapper div that is larger than all three. You're done!
i'm having a very strange problem with the wordpress template.
i'd like to place 2 divs besides each other like this:
<div style='float:left;'>
left div
</div>
<div style='float:right'>
right div
</div>
normally this works as it should - both divs should stick directly to each other -
but something in the style.css (which uses css reset) causes the right div to overlap the left div with ~ 5pixels.
i searched the whole .css for it but couldn't find out :((
it's just a fact that it must be something with the default css.
anyone knows what is causing this - some fix?
thanks
Do either of your divs have widths? Give them a width, float BOTH left and add margin-right to the first div.
Make sure your width + margin doesn't add up to more than the surrounding div. For example if your surrounding div is 600px your boxes shouldn't be more than width:290px; a margin-left:20px; on the left div.
Also, you can use Firebug or any other web development broswer tool to check to see what styles in your stylesheet/s are affecting your divs.
Float both left or use inline-block. You can also just float the first one left.
I would highly recommend that you (if you don't already have it) download FireFox and install the Web Developer Toolbar plugin. This plugin is GREAT for tracking down problems like this. Under the CSS portion of this toolbar when you're viewing the page with the issue you can select to "View Style Information". Then just click on the divs that are the issue on the page. Off to the left you should see a little window pop up that shows all the styling that is affecting those divs and what css source they are coming from. With CSS if you rely on "bug" fixes to fix things that aren't really bugs then you'll just cause more headache later on in most cases.
I think the problem is probably with parts further on in your code. May I suggest clearing the floats:
Html:
<div class="clear"></div>
CSS:
.clear {
clear: both;
}
The code you have posted would work fine, but I expect you have more divs or containers or something somewhere which is messing it up.
Total width = margin_width + border_width + padding_width+ width of the box + (the same for the other box).
Make sure you have width defined for both floating device. The best way is to debug the code by hitting F12. You can do it FireFox, IE,Chrome or Safari but usually you have to enable this option yourself.
I am new to CSS, so please bear with me. I have this form which I'm trying to style. Everything works fine, except the confirmation label which is in a div. I want some space to be there between div.field, and while this works for all the input elements, it doesn't work for the label message which is at the bottom. I tried increasing margin-top, but to no avail. I would like that element to be positioned in the center.
Using the web-developer addon of Firefox, it shows me that the width and height of div.field of label tag specifically is 284px and 209px respectively. Why is this so, when I haven't set it that way?
You can view the code live at jsfiddle: http://www.jsfiddle.net/yMHJY/
The solution is simple, really. Add a margin-top to the parent of the label element, and add overflow: hidden to the div#contact div .field selector.
However, can I just say that the code can be rewritten for much better efficiency and semantic correctness. For instance, I would contain the last massage in a p tag and not a label in a div. Also, I would have each input element placed in an unordered list ul instead of divs. You also have a lot of unnecessary floats and the br at the end of each input is wholly uneeded. Oh, and unless you are embedding Calluna somehow, don't use it - stick to web safe fonts (and if you are, you still need to suggest an alternative, in the user's browser does not support it, and also to give the browser something to display while the font loads).
Edit
Fixed the load for ya, I should be paid for this kind of stuff :) Just stick to better HTML and CSS next time.
http://www.jsfiddle.net/SNrtA/
To center you could add a parent container
<div id="parent">
<label id="label">Your Message Has Been Sent</label>
</div>
div#parent {
text-align:center;
}
or add an id to your original parent div to target it with above css
with regards to the margin, you seem to have an issue with a float:left being set in the
div#contact div input[type=text] class. You need to clear this as it could be causing you margin problems. Try removing this and amending your styles. Why are you floating the inputs left?