I have thrown a quick example in jsfiddle to show you what is happening and then I will explain what I want to achieve..
http://jsfiddle.net/4UMLq/20/
(code html - in jsfiddle)
<html>
<head>
</head>
<body>
<div class="box1top">
</div>
<div class="box1middle">
<p> Test </p><br />
<p> Test </p>
</div>
<div class="box1bottom">
</div>
<div class="box1top">
</div>
<div class="box1middle">
<p> Test </p><br />
<p> Test </p>
</div>
<div class="box1bottom">
</div>
</body>
</html>
(code css - in jsfiddle)
.box1top {
width: 150px;
height:30px;
background-color:#373737;
margin-left:10px;
margin-right:10px;
margin-top:10px;
}
.box1middle {
width: 150px;
height:200px;
background-color:#676767;
margin-left:10px;
margin-right:10px;
}
.box1bottom {
width: 150px;
height:10px;
background-color:#373737;
margin-left:10px;
margin-right:10px;
}
.box2top {
width: 150px;
height:30px;
background-color:#373737;
margin-left:10px;
margin-right:10px;
}
.box2middle {
width: 150px;
height:200px;
background-color:#676767;
margin-left:10px;
margin-right:10px;
}
.box2bottom {
width: 150px;
height:10px;
background-color:#373737;
margin-left:10px;
margin-right:10px;
}
In the example above the bg colours are going to be images for boxes that will contain text (split into 3 images)
However I want to display these side by side in the browser window instead of underneath one another.. I have tried floating the elements ect and I just cant seem to get this right?
Has anyone got any ideas? Any help is appreciated
Thanks,
Carlos
A general principle when coding (anything) is to keep it DRY (don't repeat yourself).
See here: http://jsfiddle.net/4UMLq/21/
Luckily, CSS allows us to accomplish this easily:
.box{
float:left;
margin:10px 10px 0 10px;
width: 150px;
}
.box-top {
height:30px;
background-color:#373737;
}
.box-middle {
height:200px;
background-color:#676767;
}
.box-bottom {
height:10px;
background-color:#373737;
}
#box2{
margin-left:0;
}
HTML:
<div id="box1" class="box">
<div class="box-top">
</div>
<div class="box-middle">
<p> Test </p>
<p> Test </p>
</div>
<div class="box-bottom">
</div>
</div>
<div id="box2" class="box">
<div class="box-top">
</div>
<div class="box-middle">
<p> Test </p>
<p> Test </p>
</div>
<div class="box-bottom">
</div>
</div>
Note that the top, middle, and bottom divs are each nested inside of a "box" div. There is no reason to create duplicate boxNtop, etc CSS definitions, because many elements may share the same class name. So, if you want them all to look the same, it is easily done.
There are a few ways to do this, but I think you'll want to start with wrapping those boxes within something you can float, such as: http://jsfiddle.net/wKqnh/
HTML:
<div class="box-wrap">
<div class="box1top">
</div>
<div class="box1middle">
<p> Test </p><br />
<p> Test </p>
</div>
<div class="box1bottom">
</div>
</div>
CSS:
.box-wrap {
float: left;
}
This has some other layout consequences, so for example, anything after the boxes will be aligned to the left of the last box depending on how their container is sized.
Here's a good article on basics to float based layouts: http://www.alistapart.com/articles/css-floats-101/
Related
I'm trying to get some floated elements to appear outside of a container on a drupal page that is using a theme based on Omega. my page is currently structured as such:
<h2>Some header text</h2>
<div class="grid-12 region region-content center" id="region-content">
<div class="container-12">
<div class="pricing-main-background">
<div class="grid-4 plan-box-orange">
</div>
<div class="grid-4 plan-box-green">
</div>
<div class="grid-4 plan-box-orange">
</div>
<div class="pricing-subtext">
some more text down here
</div>
</div>
</div>
</div>
Here's a sketch of what I'd like to accomplish (notice the smaller boxes outside of the container):
Visual Aid
Can anyone help provide a way to make this work (preferrably that doesn't require a mess of CSS when the boxes stack (at 480px)?
Something like this?
h2
{
width:60%;
border:1px solid black;
border-bottom:0;
margin:0 auto;
text-align:center;
}
.grid-12
{
width:60%;
border:1px solid black;
margin:0 auto;
text-align:center;
}
.pricing-main-background {position:relative;}
.plan-box-orange {background:orange;}
.plan-box-green {background:green;}
.grid-4
{
display:inline-block;
width:30%;
height:50px;
margin-top:25px;
}
.grid-4:nth-of-type(1)
{
position:absolute;
left:-10%;
}
.grid-4:nth-of-type(3)
{
position:absolute;
right:-10%;
}
I'm having trouble with WordPress, nesting box within a box.
Outside of WordPress this works fine. I'm sure there's just one or two parameters wrong.
The outer box is dp23, the inner box is dp22
For some reason there is spacing between the inner boxes (dp22) .
you can see the problem here: http://4tepiano.com/recommended-piano-books-2/
CSS code:
.dp101
{
float:left;
width:100%;
border:1px solid green;
display: inline;
clear: both;
margin:auto;
}
.dp75 {
width:84%;
border-color:gray;
border-style:solid;
border-width:1px;
overflow:auto;
float: right;
text- align:left;
padding:10px;
}
.dp22 {
border:1px solid red;
HEIGHT: 1.2em;
margin:1px;
padding:1px;
font-size: .8em;
overflow:auto;
display: block;
}
.dp23 {
width:12%;
border:1px solid green;
float:left;
margin:1px;
padding:1px;
}
[edited]
.dp23 p {
display: none;
}
Html Code:
<div class="dp101" style="BACKGROUND-COLOR: #fdfcdc">
<div class="dp23" style="HEIGHT: 150px";><!--Left Column-->
<!--category--> <div class="dp22"> category </div>
<!--Title--> <div class="dp22" > Title </div>
<!--Author--> <div class="dp22" > Author </div>
<!--Price--> <div class="dp22"> Price </div>
<!--Link--> <div class="dp22"> Amazon Link </div>
<!--Cover--> <div class="dp22" style= "HEIGHT: 85px"; > Cover </div>
</div> <!--End-Left Column-->
<!--Right Column-->
<div class="dp75"style="HEIGHT: 150px"; >
Work in progress.
</div> <!--End-Right Column-->
<div class="dp75" style="HEIGHT: 10px";> <!--Right spacer--> </div>
I have used borders to make it easy to see. The boxes should be stacked together, with the borders touching each other.
You have random <p> tags in your code between your dp22 <div>s. They look somewhat like this:
<p>
<!--Author-->
</p>
Remove them or include the following code in your CSS:
p {
display: none;
}
Though that may cause other problems if you are actually using <p> tags elsewhere.
You have empty <p> tags between those elements - they actually have comments in them..
Remove the <p> elements between dp22, and your problem is solved.
Because your coding above doesn't demonstrate this, I am going to assume that wordpress is generating these <p> tags.. I suggest removing all the unnecessary spacing in your HTML.
This is what I have done till now.
<div style="overflow:visible;width:1050px;border:1px solid green;height:50px;margin-left:115px">
<div style="border:1px solid red;position:absolute;width:730px;">
<br/><br/><br/>
<div class=''><div class='tagstyle'>FRESHER</div><div class='tagstyle'>IT JOBS</div><div class='tagstyle'>2013</div><div class='tagstyle'>BANGALORE</div></div>
<!----- left --->
<div>
<div style="border:1px solid blue;height:900px;position:absolute;width:340px;margin-left:735px;">
<!------ right --->
<div>
</div>
Problem is, right side div going downward, when left side div has any content.
Aha! Saw your edit now! It's really simple with some css3 table display properties, but that doesn't work in old browsers.
However, you could use some simple css to make a standard blog template with sidebar, header and main content:
<style>
.body-wrapper {
position:absolute;
top:20px;
left:50%;
width:900px;
margin-left:-450px; /* Half the width (negative) */
background:red;
}
.header {
position:relative;
width:100%;
height:100px;
margin-bottom:10px;
background:blue;
}
.main {
float:left;
width:70%;
background:green;
}
.sidebar {
float:right;
width:30%;
background:yellow;
}
</style>
<div class="body-wrapper">
<div class="header">
Header!
</div>
<div class="main">
Content!
</div>
<div class="sidebar">
Sidebar!
</div>
</div>
Here is a jsFiddle as proof: http://jsfiddle.net/Kepk9/
Hope it helps!
Another answer!
If you just would like to position divs after each other, you could set them to display:inline-block, like this:
<style>
.inline {
display:inline-block;
}
</style>
<div class="inline">
Labalodado
<br/>multiline content
</div>
<div class="inline">
Less content
</div>
<div class="inline">
Another div
<br/>with
<br/>multiline content
</div>
The reason why your code doesn't work is really simple actually. I made some other answers first because I think that they are a better approach.
position:absolute doesn't automatically move the item to {0,0}
You have to set top:0px by yourself.
Oh.. and there are some mistakes in your code too, but just go with one of my other too answers and you'll be fine :)
I got a little problem and nothing I test seems to work.
My HTML:
<div id="parent">
<div id="top_parent">Top_background
<div id="top">Top_Picture</div></div>
<div id="content">Here comes random stuff<div>
</div>
<div id="bottom">Footer</div>
CSS:
#top_parent {
background:#f00;
height:100px;
}
#top{
background:#0f0;
float:right;
position:relative;
height:100px;
width:50%;
}
#content{
top:-50px;
background:#00f;
<!-- position:relative;-->
height:100px;
width:80%;
margin:auto;
}
#parent{
background:#000;
height:350px;
width:100%;
}
#bottom {
height: 50px;
background:#ff0;
bottom:0px;
<!--position:absolute; -->
<!--position:relative; -->
}
Now my problem is, the footer won't get under the parent div, it stays in the content area. What am I doing wrong?
jsF link: my source
Thanks for the help.
You have not closed this div:
<div id="content">Here comes random stuff<div>
Should be:
<div id="content">Here comes random stuff</div>
You could see this easily if you indented your divs:
<div id="parent">
<div id="top_parent">Top_background
<div id="top">Top_Picture</div>
</div>
<div id="content">Here comes random stuff<div> <!-- Can see the problem -->
</div>
<div id="bottom">Footer</div>
Not sure if you copy-pasted or if this is a typo when you posted your code, but this line:
<div id="content">Here comes random stuff<div>
Should have a closing </div> tag at the end instead of that opening <div> tag. If that's actually your HTML, then it would not be grouping the divs the way you want/expect.
I think you have a wrong html:
<div id="parent">
<div id="top_parent">Top_background
<div id="top">Top_Picture</div></div>
<div id="content">Here comes random stuff<div>
</div>
<div id="bottom">Footer</div>
You didn't close div parent, nor content
<div id="parent">
<div id="top_parent">Top_background
<div id="top">Top_Picture</div>
</div>
<div id="content">Here comes random stuff</div>
<div id="bottom">Footer</div>
</div>
Interpreting that you want the "bottom" div inside the "parent", else:
<div id="parent">
<div id="top_parent">Top_background
<div id="top">Top_Picture</div>
</div>
<div id="content">Here comes random stuff</div>
</div>
<div id="bottom">Footer</div>
Also, in your css you should enable the position:relative for #content div, else the top parameter won't work.
Try if this solves the problem.
In order to position footer after the content divs you have to float content divs first and then add clear:both css command to the footer. So your tree sould look like this:::
<div class="wrapper"><div class="left"></div><div class="right"></div><br clear="all" /><div class="footer"></div>
For this example your css should be as following:::
div.wrapper{
width:80%;
position:relative;
margin:0 auto;
}
div.left{
float:left;
width:60%;
background:green;
height:200px; /height only for testing so you could see the result/
}
div.right{
float:right;
width:30%;
background:red;
height:200px; /height only for testing so you could see the result/
}
div.footer{
clear:both;
height:40px;/height only for testing so you could see the result/
background:yellow;
width:100%;
}
Have you tried taking out that "bottom" attribute in the #bottom rule?
So, i have some block, and this block must contains two divs, first div must be at left(attached to block), second at right(attached to block), and this two divs must coverage all block size.
<div id="block" style="width:800px">
<div id="left" style="float:left;width:50%;"> left </div>
<div id="right" style="float:right;width:50%;"> right</div>
</div>
Both divs have a width half of the parent's div.
But you have to be careful with borders as the width defines the width of the content (i.e. without borders). So if you use borders, the right box will be shown below the left, but still on the right side.
You would do it like this.
<div id="block">
<div id="left"></div>
<div id="right"></div>
</div>
The css would be
#block {
width:800px;
display:block //not sure if this line is required or not
}
#left {
width:400px;
float:left;
}
#right {
width:400px;
float:left;
}
There are many ways this could be done.... here's one:
<div style="position: relative; width: 100%; ">
<div style="position: absolute; left: 0; width: 50%; ">
<p>Content</p>
</div>
<div style="position: absolute; right: 0; width: 50%; ">
<p>Content</p>
</div>
</div>
Would something like this do what you want?
<div id="container">
<div id="leftside" style="width:100px; float:left">
Left Side
</div>
<div id="rightside" style="margin-left: 100px;">
Right Side
</div>
</div>
You may need to tweak the margin-left depending on the padding (and widths obviously). This is an easy way to get the two column approach (even if the two columns is a small box) :)
Or in the interests of separating the HTML and CSS, the same code represented again in two parts :) :
HTML
<div id="container">
<div id="leftside"></div>
<div id="rightside"></div>
</div>
CSS
#container:
{
/* insert any requires styles here :) */
}
#leftside:
{
width: 100px;
float: left;
}
#rightside:
{
margin-left: 100px;
}
Try this:
<div id="container">
<div id="left">
Some Content
</div>
<div id="right">
Some Content
</div>
</div>
CSS:
<style type="text/css">
#container
{
width:500px;
height:500px;
position:relative;
}
#left
{
width:250px;
height:250px;
position:absolute;
float:left;
}
#right
{
width:250px;
height:250px;
position:absolute;
float:right;
}
</style>
Adjust margin and width and you're done.
<div id="main">
<div id="left" style="float:left">
Content Left
</div>
<div id="right" style="float:right">
Content Right
</div>
</div>