I made a box in my website but after making the box everything I do is happening at the bottom of the box. I want to work on the other side of the box. Here is the demo code
<html>
<head>
<style>
div {
background-color: lightgrey;
width: 200px;
padding: 25px;
border: 3px light grey;
margin: 25px;
}
</style>
</head>
<body>
<img src="s.png" style="width:900px;height:100px" />
<div>
how to work on the<br/>
other side of box
</div>
<p>
the paragraph i am wriiting i want this on the other side of my box
</p>
</body>
</html>
You'll need float left for your Div and Paragraph. Is that the other side of the box that you're looking for?
I guess you want to "float" the div/box to the left/right.
float:left;
See here: http://jsfiddle.net/p9y9v4kz/
why don't you just use table
<table>
<tr>
<td>
how to work on the other side of box
</td>
<td>
the paragraph i am writing i want this on the other side of my box
</td>
</tr>
</table>
Other side , you mean to say left or right side?
You need to use float:left or float:right.
Fiddle
Related
I have a common header that consistently gets generated for all site web pages and which uses a div element to wrap a table element that contains one row with three cells.
The table and its cells are used to hold three images, one that shows up a the top-left of the page, one that shows up in the top-center of the page, and one that shows up in the top-right of the page.
The code currently looks like:
<div class="div_Header">
<table class="table_Header">
<tr>
<td class="td_Left"><img src="./IMAGES/Logo_Left.png" alt="Left Logo" /></td>
<td class="td_Center"><img src="./IMAGES/Center_Title.png" alt="Center Header" /></td>
<td class="td_Right"><img src="./IMAGES/Logo_Right.png" alt="Right Logo" /></td>
</tr>
</table>
</div>
In the above, CSS styles are used to do things like align the left image to the far left, the right image to the far right, and the center image to the center of the page.
My question is: Is this the best practice for achieving this or is there a better way? And, if there's a better way, how would that code look?
a 3 floated div solution in a wrapper is usually what would be used.
<div>
<div id="d1">left</div>
<div id="d2">right</div>
<div id="d3">center</div>
</div>
#d1 {
float: left;
border: 1px solid red;
}
#d2 {
float: right;
border: 1px solid blue;
}
#d3 {
margin-left: 100px;
margin-right: 100px;
border: 1px solid green;
}
see: http://jsbin.com/evagat/1/edit?html,css,output
set display:inline-block for all the div's
div {
display: inline-block;
width: 100%;
text-align: center;
}
div > div {
width: auto;
}
div > div:first-child {
float: left
}
div > div:last-child {
float: right
}
<div>
<div id="d1">content 1</div>
<div id="d2">content 2</div>
<div id="d3">content 3</div>
</div>
i believe what u want is to have a table with a bg for the row ,sadly this is not doable out-of-the-box ,instead u can do a couple of things
don't use the html table tags as they are not good for many reasons ,and browsers treats them differently (specially FF) ,so instead use the css declarations.
for each cell use the background-image: url('') along with its properties to have better control of how the image will look (specially if u r going with a responsive layout), if u dont want to give a class for each cell u can use the :nth-child(1,2,3,etc..) if u will stick with the html tags or :nth-of-type(1,2,3,etc..) if u will use a class for the 3 divs.
as a 2nd option u can use #briansol float trick but again floats are not meant for the web.
I've created this contrived example to illustrate my problem. There are two paragraphs with a div in between. The div's height and line-height have been set to 0 and all margins are also 0. I would expect for the two paragraphs to be right next to each other without any spacing from the div at all, however this is not the case in IE6. It seems to work fine in all other browsers.
Here is the HTML with all styles inlined:
<!DOCTYPE html>
<html lang='en'>
<head>
<title>Test</title>
</head>
<body>
<div id="container" style="border: 1px solid blue;">
<p style="margin: 0;">
Some text
</p>
<div style="height: 0; line-height: 0; margin: 0; border: 1px solid red;">
</div>
<p style="margin: 0; border: 1px solid green">
Should be right below "Some text"
</p>
</div>
</body>
</html>
I've added in a few borders just so you can more easily see what's going on.
Here's a screenshot of what's happening in IE6:
Any ideas on how I can get rid of that little space between the bottom of the div (red) and the top of the paragraph (green)?
Add font-size:0; to the div. That should remove the space
I believe the "p" tag automatically adds padding. In your style attributes try adding padding:0; along with the margin:0;
Another thing to try is setting your position to relative, i.e. "position: relative;"
Also make sure you're using a valid doctype: http://www.w3.org/QA/2002/04/valid-dtd-list.html
I currently use this way to center divs using a table and CSS:
<table width="69" border="0" align="center">
<tr>
<td width="59">
<div style="position:relative;">
<div style="position:absolute; text-align:left; top: 100px;">div2 content goes here</div>
<div style="position:absolute;text-align:left;">div content goes here</div>
</div>
</td>
</tr>
</table>
Here's the sample: http://2slick.com/div_center.html
Notice how expanding the browser doesn't change the centering of the divs. Does anyone know a way to do something similar using CSS and less code?
Give the div a fixed width and set both left and right margins to auto.
.centeredDiv {
width: 800px;
margin-left: auto;
margin-right: auto;
}
Common method is without using a table, set div margin:0 auto in its style.
Using a table isn't the best idea when trying to do positioning, unless you're displaying data. If you're trying to use a center layout page design check this out: http://simplebits.com/notebook/2004/09/08/centering/
margin:auto
Should do the trick on the centered div. To recreate your example pretty closely:
<div style="width:100px; margin:auto">
<div style="width:100px;">div content goes here</div>
<div style="width:100px;">div2 content goes here</div>
</div>
You can then add padding, text alignment etc as needed. Also good to get the inline styles out, but for examples inline is convenient.
Just set auto margins. See this page:
http://www.bluerobot.com/web/css/center1.html
Here goes...
CSS:
body {
text-align: center;
}
div {
width: 59px;
margin: auto;
text-align: left;
}
HTML:
<div>I'm a div!</div>
<div>So am I!</div>
I'm trying to make a 100% height layout with a footer at the bottom. I have a site wrapper, in which I have two content divs. In the second content div I have a footer at the bottom. The problem is the top content div seems to be pushing the second content div beyond the website wrapper.
This is the code I'm experimenting with:
<style type="text/css">
html, body { height:100%;}
#sitecontainer {
height:100%;
border: medium #000 solid;
}
#contentcontainerone{
border: medium #F00 solid;
}
#contentcontainertwo{
height:100%;
border: medium #00F solid;
position:relative;
}
#footer{
position:absolute;
bottom:0;
width:100%;
text-align:center;
}
</style>
</head>
<body>
<div id="sitecontainer">
<div id="contentcontainerone">
Some content <br />
Some content <br />
Some content <br />
Some content <br />
Some content <br />
</div>
<div id="contentcontainertwo">
<div id="footer">Footer</div>
</div>
</div>
</body>
This is the link to the page: http://www.smsidat.com/test/index.html
What I basically want to achieve is that the website should always be 100% height wise and so stretch to the bottom of the browser window or where the content ends if it's of greater height with a footer at the bottom. So ideally, the div with the blue border should remain within the wrapper which has the black border and stretch no further than the bottom of the browser window or the end of the content if it's greater.
Would appreciate any ideas how to fix this, thanks.
Here the solution:
html, body
{
height: 100%;
overflow: hidden;
}
#sitecontainer
{
height: 100%;
position: relative;
}
#footer /*OUTSIDE THE CONTAINER */
{
bottom: 0;
position: absolute;
height: 50px; /*change this*/
}
Using the <table> tag is indeed not recommended for layout.
CSS3 has many ways to solve this as described above (use 100% height for the container and their parents all the way to the html tag). There are cases (ref: Eric Meyer, Smashing CSS book) however, when the CSS display: table-cell style attribute can be appropriate for layout ... such that at least it puts the layout control back in the CSS versus the content as a best-practice.
Trying to align a DIV at the bottom of another div can be tricky. There are hackish ways to accomplish this but I would recommend just using a table.
<table>
<tr>
<td><div id="header"></div></td>
</tr>
<tr>
<td><div id="content"></div></td>
</tr>
<tr>
<td><div id="footer"></div></td>
</tr>
</table>
Then use CSS to define the heights of each DIV, with the content DIV stretching with the page until overflow occurs while the header and footer DIVs stay at their original heights.
This question already has answers here:
How to center an element horizontally and vertically
(27 answers)
Closed 8 years ago.
I have a div with a background image that needs to be centered horizontally and vertically. On top of that image, I also want to display a 1-line text, also centered horizontally and vertically.
I managed to get the image centered, but the text is not centered vertically. I thought vertical-align:middle would do the trick.
Here's the code I have:
<div style="background: url('background.png') no-repeat center; width:100%; height:100%; text-align:center;">
<div style="color:#ffffff; text-align: center; vertical-align:middle;" >
Some text here.
</div>
</div>
Any ideas?
Workaround: I actually got this to work by using a table. (I'll probably be cursed to hell by the HTML community.) Is there any significant reason not to use this btw? I'm still interested in the solution using divs though.
<table width="100%" height="100%">
<tr>
<td align="center" style="background: url('background.png') no-repeat center; color:#ffffff;">Some text here.</td>
</tr>
</table>
Horizontal centering of a block element is traditionally done this way:
div.inner { margin: 0 auto; }
Note: the above won't work with IE in quirks mode so always put a DOCTYPE at the top of your document to force it into standards compliant mode.
Vertical centering is much more tedious. See Vertical Centering in CSS
there is no direct vertical centering for div content in CSS, however there are indirect ways of achieving it.
http://phrogz.net/CSS/vertical-align/index.html
also many similar questions in SO. How to vertically center a div for all browsers?
In case you have to use only one line of text and parent div has fixed height use line-height property. Suppose parent height is 500px then use CSS line-height: 500px; for text.
Without using javascript (ala something like thickbox, etc. for positioning photos/captions centered), the closest I could come to was this:
<body style="height:200px; min-height:800px;">
<div style="background: url('background.png') no-repeat center; height:100%;">
<div style="text-align: center; position:relative; top:50%; color:#fff;">
Some text here.
</div>
</div>
</body>
Note that I had to specify some sort of height for the container (in this case the BODY but it could also have been applied to the wrapper DIV I think). In Explorer 6, you can set the BODY height to 100% but in Firefox this doesn't work and probably won't work in other modern browsers.
EDIT:
Found a better solution:
<style type="text/css">
html, body {height:100%;}
</style>
</head>
<body>
<div style="background: url('background.png') no-repeat center; height:100%;">
<div style="text-align: center; position:relative; top:50%; color:#fff;">
Some text here.
</div>
</div>
</body>
If you want to get VERTICAL centering, I would suggest to use a table inside the DIV (as suggested by Cletus above other ways might be tedious).
div.centered table {margin: 0 auto;} /* no width needs to be specified for table */
div.centered table td {vertical-align: middle;} /* replace this with vertical-align: top; to disable vertical centering */
<!-- borders added only to help understanding -->
<div class="centered" style="border: 1px solid #cccccc;">
<table style="border: 1px solid #ff0000;">
<tbody>
<tr><td>
Some text here
</td></tr>
</tbody>
</table>
</div>
If you are only interested in HORIZONTAL centering (no vertical) you can use only DIV:
div.centered div {margin: 0 auto; width: 300px;} /* some width MUST be specified to center a DIV. */
<!-- borders added only to help understanding -->
<div class="centered" style="border: 1px solid #cccccc;">
<div style="border: 1px solid #ff0000;">
Some text here
</div>
</div>
As you might have noticed in order to horizontally align a DIV inside a DIV you also need to specify a fixed width for the inner DIV. This might be somehow not what you want to do, so it might be easier to use always the 1st solution (the one with TABLE) and simply remove the "vertical-align: middle;" when you want to get only horizontal centering.
I tested this using document with:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
on IE7, FF 3.6, SAFARI 4.0.4