http://www.perfectclaims.com/ppiclaimsnew/
I dont understand why the first part of the title is right aligned?
any ideas?
Thanks
<div id="breadcrumb">
That div is creating space. I would guess you want to give it a width of 100% to make it fill horizontally so the title below has the full width to work with.
Incidentally, I was able to find out the information easily by using firebug, which is an extension for firefox.
Because that breadcrumb div is floating in the way of it. You can move the title paragraph down manually, or you can use the CSS property clear to avoid this.
It's because you're floating the breadcrumb trail to the left (and for no apparent reason, I might add). You can either remove the float CSS attribute from #breadcrumb or add clear: both; to .title.
add clear: left; to your paragraph <p class="title" style='clear: left;'>
Just remove the line float:left from id #breadcrumb.. Here float:left is not needed
so your code looks like below
#breadcrumb {
background-color:#FFFFFF;
color:#999999;
font-size:10px;
margin-top:5px;
padding-bottom:10px;
position:relative;
width:550px;
}
Cheers !!
If you are using google chrome, place the mouse over the element, right click and select 'inspect-element'.
Related
At this link:
http://thom239u.keaweb.dk/help/mit.html
i have a div called main (black border) and a nav (red border)
i have tried everything, why ain´t they a side
when they are empty they are side by side,
but when i put something in them they split.. ?
i tried to erase it all and start from beginning again, but wont help..
![enter image description here][1]
i'm trying to get i nav a left an a div box where i can change what's in it.
Please add
vertical-align: top; to #main
You should use float:left;
You can add that to the <Nav> and <Div id="main">
You're looking for
vertical-align:top;
Additionally, under the standard box model, they will not correctly align side by side at lower resolutions if you use width % and have a border/padding. You are using width:10% and width:89% for each element, I'm assuming you were trying to make them fit and 10%/90% wasn't working.
If you apply box-sizing to each of the elements, it will take into account the extra width allocated to borders/padding of that element, and allow you to simply state 10% width & 90% width.
You need only vertical-align to #main, since display:inline-block elements need to be aligned.
#main{
vertical-align:top;
/* other styles*/
}
whats-the-deal-with-display-inline-block
I wrapped an tag with a gray border, and for some reason I can't align it.
text-align:center; isn't working.
The other things work like width:155px;
So what's wrong?
There are many ways to do that.
The first could be make a auto-position style like this:
<h2 style="margin: 0 auto; width:50%; ">The Subtitile</h2>
This will positioning your h2 block in the middle of screen. The best should be use a CSS in a separated file.
I hope my aswer help you.
I have a WordPress site where I am using shortcodes to align images in four columns. This normally works fine but for some reason each image isn't aligned directly next to the other, but instead slightly indented from the top of the other.
You can see my site as an example here: http://goo.gl/e7gUo
Does anyone know how to fix this issue?
The CSS for the shortcode column is currently:
float:left;
margin-right:4%;
position:relative;
width:22%;
Add:
.one_fourth{ float: left; }
And remove the <br>s between them.
Remove <br /> after each block with image
OK this is fairly complicated to explain so I've put it online here:
http://jsfiddle.net/zSgPr/10/
I need the yellow container to wrap around the lower brown div and red footer div in this set-up, leaving the footer at the bottom of the page, ideally where I can then adjust it by pixel margins. I have tried multiple ways of clearing it with some luck, however I can't figure out how to get the footer to behave or the content to encapsulate properly. Could somebody suggest a means of doing it? Thanks guys.
This is what I am trying to achieve
Answer:
Was overlooking the obvious that I needed another container div. If anyone wants to see it's on-line here: http://jsfiddle.net/zSgPr/21/
Add bottom:0 to .textbox
Plcace the .textbox div outside the container which means when you are giving position:absolute the parent div should have Position:relative so add relative to main div which is .page
LIVE DEMO
SOLUTION
Change .textbox style like this mayble helpful
.textbox{
margin:0px 10px;
background-color:#262626;
width:700px;
position:relative;
z-index:40;
border:2px dashed #381e01;
float:left;
}
DEMO
I cannot get the background to stretch behind the contentbox. The strange thing is, it works with Internet Explorer, but not with Firefox.
I hope it is enough to give you a link, since I do not know where the problem is in the code, it would not make much sense to post the whole code in here.
http://www.yiip.de/arbeit/testlayout/standard_template.html
You can also add overflow:hidden; to #shadow. That will clear the floats without having to put additional markup in your html.
try adding the following 'clearfix' style to your wrappers
.clearfix:after {
content:"\0020";
display:block;
height:0;
clear:both;
visibility:hidden;
overflow:hidden;
}
.clearfix {display:block;}
You need to clear your 3 floated divs for the containing div to expand vertically around them. The easiest way to do this is to add
<br clear='both' />
after the third floated div (but within the container div).