I cannot seem to get my float to behave as I expect them to. I am attempting to create a four panel setup, like the windows logo. The problem is, the fourth panel keeps staying flush with the last block of the top row. I am running this in IIS6 in IE7. It runs fine in the fiddle below as well as on IIS7, but I cannot get the same behavior in IIS6.
http://jsfiddle.net/9GCrm/
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style type="text/css">
#replist
{
background-color:blue;
float:left;
height:250px;
width:300px;
margin-right:10px;
margin-bottom:10px;
padding:3px;
}
#repedits
{
background-color:blue;
float:left;
height:250px;
width:300px;
margin-bottom:10px;
padding:3px;
}
#mgrslist
{
background-color:blue;
height:250px;
width:300px;
clear:both;
float:left;
margin-right:10px;
padding:3px;
}
#importdiv
{
background-color:blue;
float:left;
height:250px;
width:300px;
padding:3px;
}
</style>
</head>
<body>
<div id="admindiv">
<div id="replist">
</div>
<div id="repedits">
</div>
<div id="mgrslist">
</div>
<div id="importdiv">
</div>
</div>
</body>
</html>
just remove clear:both; from #mgrslist and instead add it as a separate class, like :
<div id="admindiv">
<div id="replist"></div>
<div id="repedits"></div>
<div class="clr"></div>
<div id="mgrslist"></div>
<div id="importdiv"></div>
</div>
demo here
Why it works?? because <div class="clr"></div> will clear the float for all the divs before it but adding it to the class will only clear:float for that particular class and not the pre-divs before that class!!
Also, now that pseudo classes like :before and :after exist, its better practice to use them for clearing a float.
Read this thread to understand it better : replace the clear:both with pseudo class
Related
I want to insert a little green square between words on my WordPress homepage. I wrote the html:
<div class="x"><center><p
style="border:10px; border.
style:solid;
border-color:#00ff00; padding:
0.0em; width: 2px; height:
2px;">
</p></center></div>
Pen: https://codepen.io/adsler/pen/KOXzPw
Site: http://4309.co.uk
Every other page I can access and edit but not the same for homepage.
Here you go.
go to your appearance, customise, add'text widget' then add the html code. If you were to add the css, you would need to go to --> appearance --> additional css
Have a great day!
Austin
It will be work
<div class="x"><center><p >Write Something<span style="border:10px; border-style:solid; border-color:#00ff00; padding: 0.0em; width: 2px; height: 2px;"></span> New</p></center></div>
Pen: https://codepen.io/shakil-shaikh/pen/xvXdEX
3 divs. Div one for top, div two for the square, and div three for bottom. If you need more explanation, I can elaborate.
Check below.
Box ‘one’ would be where text one goes, ‘center’ is where you would style the geometric shape, and ‘box2’ is where the second string of text will go.
When I get to my computer I’ll see if I can write out the full code for you to use.
<div id=box1></>
<div id=center></>
<div id=box2></>
Is this what you want to accomplish?
<!doctype html>
<head>
<meta char="utf-8">
<title>box test</title>
<style>
#content {
margin:25px auto;
}
#text-1 {
border:#000000 2px solid;
width:20%;
height:20%;
margin-bottom:10px;
}
#shape {
border:#000000 2px solid;
width:20%;
height:20%;
}
#text-3 {
border:#000000 2px solid;
width:20%;
height:20%;
margin-top:10px;
}
</style>
</head>
<body>
<div id=content>
<div id=text-1>text one</div>
<div id=shape>shape</div>
<div id=text-3>text two</div>
</div>
</body>
<html>
Does this work? the position property allows you to put your div's anywhere on the website. Just remember that the attribute allows for stacking. Just use the left/right/top/bottom attribute.
#container {
width:1000px;
}
#x {
position:absolute;
top:0px;
left:0px;
background-color:blue;
}
#center {
position:absolute;
top:0px;
left:150px;
}
#y {
position:absolute;
top:0px;
left:300px;
background-color:#ffff00;
}
<div id="container">
<div id="x">Write something</div>
<div id="center">middle</div>
<div id="y">New</div>
</div>
I have two divs at the moment that I'm wanting to float on left and right sides however they are both kinda sticking to each other and can't seperate them..
html:
<nav>
<div id="nav_content">
<div id="home_icon" />
<div id="search_icon" />
</div>
</nav>
So I'm trying to float the home_icon to left and search_icon to right:
CSS
nav
{
background:white no-repeat;
width:75%;
height:5em;
margin-left:8em;
}
#nav_content
{
width:100%;
height:100%;
clear:both;
position:relative;
display:inline-block;
float:left;
}
#home_icon
{
background:url(../images/home.png) no-repeat;
width:50px;
height:50px;
top:50%;
position:relative;
transform: translateY(-50%);
transition:ease-in-out 0.5s;
margin-left:1em;
float:left;
display:inline-block;
}
#search_icon
{
background:url(../images/searchicon.png) no-repeat;
width:40px;
height:40px;
top:50%;
transform:translateY(-50%);
transition:ease-in-out 0.5s;
float:right;
display:inline-block;
position:relative;
}
You can't do
<div id="home_icon" />
<div id="search_icon" />
in HTML 5. Because it means the same as
<div id="home_icon">
<div id="search_icon">
which makes the browser think that #search_icon is inside #home_icon.
So, either set the DocType to XHTML or close the divs properly.
Related Question - Are (non-void) self-closing tags valid in HTML5?
jsFiddle - http://jsfiddle.net/9vd01zx5/
You are using wrong HTML closing tags
use:
<div id="home_icon">Left</div>
<div id="search_icon">Right</div>
Remove the text left and right later..
This question already has answers here:
How can I vertically align elements in a div?
(28 answers)
Closed 8 years ago.
I am trying to align text at the bottom of a Div and the Middle of a Div. The CSS attribute
vertical-align:text-bottom; seems to do nothing?
I have 3 divs and would like to center the div xrLabel1 and the other div xrLabel5 to put the text at the bottom.
I have included some sample code.
Thanks
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="format.css"/>
<title></title>
</head>
<body>
<div class="TopMargin">
<div class="xrLabel2">xrLabel2</div>
<div class="xrLabel1">xrLabel1</div>
<div class="xrLabel5">xrLabel5</div>
</div>
</body>
</html>
The CSS file format.css
.TopMargin
{
position:absolute;
left:0px;
top:0px;
height:92px;
width:650px;
background-color:#808080;
color:#000000;
}
.xrLabel2
{
position:absolute;
left:225px;
top:17px;
height:67px;
width:99px;
background-color:#FFFFFF;
color:#000000;
text-align:center;
vertical-align:text-middle;
font-family:Times New Roman ;font-size:9.75pt;text-decoration:underline;
}
.xrLabel1
{
position:absolute;
left:367px;
top:8px;
height:75px;
width:99px;
background-color:#FFFFFF;
color:#000000;
text-align:right;
vertical-align:text-bottom;
font-family:Times New Roman ;font-size:9.75pt;text-decoration:underline;
}
.xrLabel5
{
position:absolute;
left:75px;
top:8px;
height:75px;
width:99px;
background-color:#FFFFFF;
color:#000000;
text-align:center;
vertical-align:text-top;
font-family:Times New Roman;font-size:9.75pt;
}
You need to use display:table on the parent element, and display:table-cell; vertical-align:bottom; for the children. Example here: http://jsfiddle.net/hAScR/
Block elements does not support vertical-align as such. You need to set the display attribute to table-cell. Then you can use vertical-align.
http://jsfiddle.net/kuUHV/
You could use text-align:center on the parent element. And a margin-top on the child element.
<div id="outer"> #text-align:center
<div class="inner">Radom text </div> # margin-top:__
</div>
Fiddle Demo :)
Note: // Don´t use this for responsive Design - when you resize the window the element will stay on the same spot if the element gets to small.
Well hi, guess what, I have an IE positioning issue! This is in 8, so god know what's going on in the other versions (checking later)
Both the boxes call the same class, why is IE being so difficult?
Here's how it's meant to look:
And here's how it does look:
CSS: (removed comments for ease of reading)
div .roundbigboxkunde {
background-image:url(../../upload/EW_kunde_info.png);
background-position:top center;
padding:10px;
padding-top:10px;
padding-bottom:20px;
width:560px;
height:1%;
border-width:1px;
border-color:#dddddd;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
z-index:1;
position:relative;
overflow:hidden;
}
div .roundbigboxkundei {
margin-top:10px;
padding:10px;
padding-top:10px;
padding-bottom:10px;
width:760px;
height:1%;
position:relative;
overflow:hidden;
And HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<div class="roundbigboxkunde">
<div class="roundbigboxkundei">
<p id="nyk"> </p>
<div id="bg_box2"></div>
<p class="required">
<label for="billing_firstName"><span class="label">Fornavn:</span></label>
<fieldset class="error"><input name="billing_firstName" class="text" type="text" value="Kyle"/>
<div class="errorText hidden"></div>
</fieldset>
</p>
CONTENT CONTINUES
</fieldset>
Here is the page
Given that you have some content which looks like it's appearing inside other content, if I were you I'd start by double checking that all your tags are closed (i.e., that you don't have a <div> that's missing its </div>).
But it's hard to tell from what you've posted . . . If the page is hosted somewhere and you can link to it, that would make it easier to debug.
I added:
<div class="clear"></div>
with the css:
.clear
{
clear: both;
width: 100%;
height: 0;
overflow: hidden;
float: none !important;
}
Between the two boxes. Fixed it right up :)
Here's a weird bug I've found, IE8 is duplicating my div, but only a part of it.
How it looks in IE8:
And here's how it's meant to look in FF:
And the HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
\/\/\
<div id="roundbigbox">
<p id="pro">Produkter</p>
<div id="titles">
<div id="thinlinecopy"></div>
<div id="varekodetext">
<p>Varekode</p>
</div>
<div id="produkttext">
<p>Produkt</p>
</div>
<div id="pristext">
<p>Pris</p>
</div>
<div id="antalltext">
<p>Antall</p>
</div>
<div id="pristotaltext">
<p>Pris total</p>
</div>
<div id="sletttext">
<p>Slett</p></div>
<div id="thinline"></div>
</div>
...content...
<div class="delete">
<a id="slett" href="/order/delete/1329?return=" title="Slett"><!--Slett--></a>
</div>
</div>
CSS for FF:
div #roundbigbox {
background-image:url(../../upload/EW_p_og_L.png);
background-position:top center;
background-repeat:no-repeat;
padding:5px;
padding-top:10px;
padding-bottom:0px;
width:760px;
height:1%;
border-width:1px;
border-color:#dddddd;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
z-index:1;
position:relative;
overflow:hidden;
margin:0;
margin-bottom:10px;
}
CSS for IE:
div #roundbigbox {
background-image:url(../../upload/EW_p_og_L.png);
background-position:top center;
background-repeat:no-repeat;
padding:5px;
padding-right:50px;
padding-top:10px;
width:760px;
height:1%;
border-width:1px;
border-color:#dddddd;
z-index:1;
position:relative;
overflow:hidden;
margin:0;
margin-bottom:10px;
}
What could cause such a weird bug? It's not duplicated in the HTML. I am stumped!
Note: There a lot of other divs inside, one after the other.
Thanks for any responses.
i would say the same as: graphicdivine. (remove the extra </div> at the end) plus you shoud review your CSS:
negative paddings do not exist :P (even in IE)
you can set your paddings with only one declaration: padding: top right bottom left
same thing for border and background:
background:url(../../upload/EW_p_og_L.png) top center no-repeat;
border: 1px solid #ddd; /* when you have e hex color with 6 same characters just write 3 of them */
You have an extra </div> at the end.
It looks like your stylesheet may have a mistake in it:
CSS for IE:
div #roundbigbox {
...
padding-bottom:-20px;
....
}
That may be what's causing the bottom portion to be coming up like that.
try to take the comment out of the <a>
tag
Sound sounds weird, but I have seen issues with this... <!--Slett-->
Added this right after my div markup, it fixed it.
<div style="display:none; width:100%; margin-bottom:10px;"> </div>
Strange problem. Thanks for all your help!