I have two divs inside a div, I want them both adjacent to each other with a margin of 10px or so separating them but instead they appear one above the other.
<div>
<div class="post" id="fact">
</div>
<div class="post" id="sortbar">
</div>
</div>
Here is my styling:
#fact{width:200px; margin-left:auto; margin-right:auto;} #sortbar{margin-left:auto; margin-right:auto;}
The whole code is within a div container wrapper with these properties:
#wrapper {
float:left;
margin-top:10px;
width:728px;
}
You have two options (choose one or the other but not both).
set float: left; on both #fact and #sortbar
set display: inline-block; on both #fact and #sortbar
The second option is better because you don't have to fix the clearing and such, as well as the fact that inline-block works a lot better layout-wise than left floating.
See this working example. You can copy and paste this HTML & CSS and try it out.
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS styling - how to put these two div boxes adjacent</title>
<style type="text/css">
.wrapper .post {
-moz-border-radius:7px 7px 7px 7px;
border:1px solid silver;
float:left;
margin:10px;
min-height:100px;
padding:5px;
width:200px;
}
</style>
</head>
<body>
<h4>CSS styling - how to put these two div boxes adjacent</h4>
<div class="wrapper">
<div class="post">
<div>
Browse (Google)
</div>
<div>
This is a Div
</div>
<div>
This is a Div
</div>
<div>
This is a Div
</div>
</div>
<div class="post">
<div>
Browse (Wikepedia)
</div>
<div>
This is another Div
</div>
<div>
<div>
This is another Div
</div>
<div>
This is another Div
</div>
</div>
</div>
</body>
</html>
Something like this should do it...
#fact {
width:200px;
float: left;
margin: 0 10px 0 0;
}
#sortbar {
float: left;
}
Add float:left;:
#fact, #sortbar{
float:left;
margin-left:10px;
}
See the working demo here.
Essentially your #fact and #sortbar divs still have the default 'block' display type which, in simple terms, will put your divs in their own horizontal space. The other answers here show how to use "float" to solve your issue.
Here's some linkage for you:
box model: http://www.w3.org/TR/CSS2/box.html
display css property: http://www.w3schools.com/css/pr_class_display.asp
float tutorial: http://css.maxdesign.com.au/floatutorial/
Dan
Related
I'm trying to center vertically a div inside an inline-block,
I used this inline-block to get automatically size of child in order to center my div.
The problem is my children div are floating... in order to constrain it to the left/right position.
Here is how the HTML look like :
<span class="block_container">
<div class="block_text"> <!-- float:right -->
<h1>TITLE</h1>
<p>lorem ipsum</p>
</div>
<div class="block_image"> <!-- float:left -->
<img src="test.png"></img>
</div>
</span>
However, I can't figure out this problem : http://jsfiddle.net/kl94/nH2sd/
Edit:
Here is what I want :
Here is what I tried :
http://jsfiddle.net/kl94/nH2sd/
To get the actual vertical alignment working the way you want it to work as per your attached screenshot, you have to change a few things.
1. Adding a display:table-row; to the parent block.
2. Removing all floats and replacing it with display:table-cell;
This will enforce the exact characteristic of vertical-alignment to co-exist and work the way you want it to work as per the attached screenshot.
Here is the WORKING DEMO
The HTML:
<span class="block_container">
<div class="block_image">
<img src="https://upload.wikimedia.org/wikipedia/commons/6/64/Gnu_meditate_levitate.png"></img>
</div>
<div class="block_text">
<div class="bgColor">
<h1>TITLE</h1>
<p>I should be align vertically but the problem is i don't know my left neightbor height...</p>
<div>
</div>
</span>
The CSS:
.block_text {
/*background: red;*/
/*float: right;*/
width: 60%;
display:table-cell;
vertical-align:middle;
}
.block_image {
background: yellow;
/*float: left;*/
width: 40%;
display:table-cell;
}
.block_image img {
width: 100%;
max-width: 300px;
height:auto;
}
.block_container {
background:teal;
/*display:inline-block;*/
display:table-row;
}
.bgColor{background:red;}
Hope this helps.
You could try something like this: http://codepen.io/pageaffairs/pen/LlEvs
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
.block_text {
background: red;
display:inline-block;
vertical-align: middle;
}
img {
width: 40%;
max-width: 300px;
vertical-align:middle;
background: yellow;
}
.block_container {
background:teal;
display: inline-block;
}
</style>
</head>
<body>
<div class="block_container">
<img src="https://upload.wikimedia.org/wikipedia/commons/6/64/Gnu_meditate_levitate.png"><div class="block_text">
<h1>TITLE</h1>
<p>I should be align vertically but the problem is i don't know my left neightbor height...</p>
</div>
</div>
</body>
</html>
You can try to add this:
margin-top: 13%; at your .block_text selector in CSS.
I need a way to make a div repeat a certain number (36) of times vertically, with 1px of space between each one. The divs are absolutely positioned, so styling each one individually would be a ton of CSS.
I don't mind putting 36 divs into the HTML directly, although I'd prefer not to, but styling each one would be inefficient.
How about nest them?
you can nest them with relative positioning or maybe some margin: http://jsfiddle.net/zWbUu/
HTML
div id="container">
<div class="square">
<div class="square">
<div class="square">
<div class="square">
<div class="square">
<div class="square"></div>
</div>
</div>
</div>
</div>
</div>
</div>
​
CSS:
#container {
position: absolute;
top: -21px;
left: 20px;
}
.square {
background-color: #666;
width: 20px;
height: 20px;
position: relative;
top: 21px;
}​
If you need some content int them, you can use a nested absolute positioned div or this trick: http://jsfiddle.net/zWbUu/1/
HTML:
<div id="container">1 (doesn't apear)
<div class="square">2
<div class="square">3
<div class="square">4
<div class="square">5
<div class="square">6
<div class="square">7</div>
</div>
</div>
</div>
</div>
</div>
</div>
​CSS:
#container {
position: absolute;
top: -20px;
left: 20px;
}
.square {
background-color: #666;
width: 20px;
height: 20px;
line-height: 20px;
position: relative;
top: 1px;
color: #fff;
text-align: center;
}​
As others have said, you cannot do this using pure HTML or CSS.
If you wanted to do it with PHP, you could do something like this:
Say that your div has a class called "mydiv."
This class should have
Position:absolute Height:10px Width:10px Border-radius:4px
just like you said. In addition to those, add a 1px top margin.
Your CSS should now look kinda like this:
.mydiv {
position:absolute;
height:10px;
width:10px;
border-radius:4px;
margin-top:1px;
}
To make your div repeat, put some code like the following inside your HTML where you want it to go.
<?php
for ($i = 1; $i <= 36; $i++) {
echo "<div class='mydiv'>your div</div>";
}
?>
Like I said, this uses PHP. If you've never used PHP before, then you should check if your webserver supports it. See this for a bit more info on using PHP inside HTML:
http://www.ntchosting.com/php/php-in-html.html
This code probably isn't perfect but I'm sure you'll be able to work with it.
This is not possible with absolute positioning, because as you stated with absolute positioning you must define the coordinates of the objective as it is taken out of the document flow.
You can do this with floats however. Take the following code for example:
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<style type="text/css">
body{
background-color:#000;
padding: 0;
margin: 0;
}
#holder{
width:15px;
margin: 30px auto;
padding: 1px 1px 0 1px;
clear: both;
}
.box{
width:10px;
height:10px;
margin-bottom: 1px;
background-color: #3F6;
float:left;
}
</style>
</head>
<body>
<div id="holder">
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
</div>
</body>
</html>
By making the holder div less than the width of two box divs you force the next box div to appear on a newline below the previous one without giving it an exact positioning value. Then just give it a margin to add the spacing.
The only way you can do this with one div would be to create an image of what the current div looks like, with 1px of whitespace. This way, you can create a fixed width/height div that has the background of the image set to repeat. This will give the illusion you want with only one div.
Otherwise, as already stated, you will need x amount of divs to get the repetition you need. This can be easily achieved using jQuery or something similar but if you really only want one div, then the background-image may be the way to go.
I'm trying to create the following layout using CSS:
Gray Rectangle = Container
Blue Rectangle = Image
White Rectangle = Content
Unfortunately the best I've been able to manage is this:
I have two problems with the content div:
How to make the content div sit to the right of the image without hard coding the width.
How to make the content div expand vertically to fill the container.
Apologies if a similar question has already been asked. I've read similar questions here but they all seem to relate to other layout concerns.
HTML:
<html>
<head>
<title>Test</title>
<link href="test.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div class="solid">
<img id="snapshot" src="page.jpg">
<div class="content" style="margin-left: 165px;">
Test
</div>
<br style="clear:both"/>
</div>
</body>
</html>
CSS:
#snapshot {
float: left;
}
div.solid {
padding: 5px;
border: 1px solid black;
background-color: #E8E8FF;
}
div.content {
border: 1px solid black;
background-color: #FFFFFF;
}
If you know the width of the image, you can do something like this: http://jsfiddle.net/EeLjd/
Use position: absolute on the content, and set the left to the width of the image, plus the padding. Use float: left on the image.
Equal height columns are always a pain. If the image width is fixed, perhaps the easiest way is to put the image inside the content div and then push it back to the left with a negative margin:
<html>
<head>
<title>Test</title>
</head>
<body>
<div class="solid">
<div class="content" style="margin-left: 165px">
<img id="snapshot" src="page.jpg" style="margin-left: -165px;">
Test
<div style="clear:both"></div>
</div>
<div style="clear:both"></div>
</div>
</body>
</html>
If i am right display:inline should display div on the same line without any line break. This is my web page where display:inline simply makes my div invisible:
<html>
<head>
<style type="text/css">
.body{
max-width:3072px;
min-width:3072px;
margin:0px auto;
background:#293231;
}
.page1{
background:url('Main.jpg') no-repeat;
width:1024px;
height:211px;
}
.page2{
background:url('Page2.jpg') no-repeat;
width:1024px;
height:211px;
display:inline;
}
.page3{
background:url('Page3.jpg') no-repeat;
width:1024px;
height:211px;
display:inline;
}
.wrapper{
display:block;
width:100%;
height:auto;
}
</style>
</head>
<body class="body">
<div class="wrapper">
<div class="page1">
</div>
<div class="page2">
</div>
<div class="page3">
</div>
</div>
</body>
</html>
I can see divs with class = page1, but page2 and page3 are invisible.
A non-block element can't have height/width specified like that (and with no content inside, it'll have nothing to give it size) - instead you want inline-block, like this:
display: inline-block;
You can see a full list of options for display here
Unfortunately, display: inline-block is not supported by older versions of IE. You can do this by floating your three inner div tags left, and undoing the float on the containing element. Here is the complete example (see my comments for the relevant changes):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
.body { max-width:3072px; min-width:3072px; margin:0px auto; background:#293231; }
.page1{ background:url('Main.jpg') no-repeat; }
.page2 { background:url('Page2.jpg') no-repeat; }
.page3{ background:url('Page3.jpg') no-repeat; }
/* These next two lines are my changes. */
/* Float these guys left */.page1, .page2, .page3 { width:1024px; height:211px; float: left; }
/* Add overflow: hidden to "undo" the floating */.wrapper{ overflow: hidden; width:100%; height:auto; }
</style>
</head>
<body class="body">
<div class="wrapper">
<div class="page1">
</div>
<div class="page2">
</div>
<div class="page3">
</div>
</div>
</body>
</html>
When I write <div name="a">Foo</div><div name="b">bar</div>, I want horizontal alignment instead of vertical alignment. How to do it? Is there a simple way to do that? By default, it is vertical alignment.
Set the divs to inline-block:
.a, .b {
display: inline-block;
}
This assumes elements with classes of a and b, not names like in the HTML you posted. With this method you can also line up the elements vertically using the vertical-align property, i.e. align to the top, middle or bottom:
+---+
| | +---+
| A | | B |
| | +---+
+---+
The default display mode for a div is "block" which includes a line break before and after the div. If you dont want the line breaks you can change the display property to inline which should align them horizontally as long as there is enough width in the parent element to contain both divs.
Display Proprties:
http://www.w3schools.com/css/pr_class_display.asp
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<div style="width:510px; background-color:#ffee88;">
<div style="display:inline; background-color:#ffeeff;">
check check 1 2
</div>
<div style="display:inline; background-color:#eeffff;">
hello this time
</div>
</div>
</html>
Try this:
<div style="float:left;" name="a">Foo</div><div style="float:left;" name="b">bar</div>
Furthemore, you can set the width of each div:
<div style="float:left;width:30%;" name="a">Foo</div><div style="float:left;width:70%;" name="b">bar</div>
You can either use a SPAN tag to wrap your Foo and bar elements, or you can set the CSS 'display' attribute for each div to be 'inline-block'.
<div name="a" style="display:inline-block">Foo</div>
<div name="b" style="display:inline-block">bar</div>
These are not demonstrating "vertical alignment", they are block elements vs. inline elements.
The simple answer: use SPAN, not DIV
This should do it:
<div name="a" style="float:left; width: 100px;">Foo</div>
<div name="b" style="float:left; width: 100px;">bar</div>
<div style="clear:both"></div>
You could always do absolute positioning with stylesheets to make your divs line up on the same row. For example:
<!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">
<head>
<title>Untitled Page</title>
<style type="text/css">
#logo
{
background: #000000;
position: absolute;
left: 0px;
top: 0px;
width: 250px;
height: 200px;
}
#Banner
{
background: #1071A6;
position: absolute;
left: 250px;
top: 0;
width: 850px;
height: 250px;
}
</style>
</head>
<body>
<div id="logo">
</div>
<div id="Banner">
</div>
</body>
</html>
Given:
<div id='someSectionOfMyPage'>
<div name="a">Foo</div>
<div name="b">bar</div>
</div>
Add to your stylesheet:
#someSectionOfMyPage div {
display: inline-block;
}
Check these examples of css positioning as well.