Hows it going.
Im just started to learn a bit about joomla and Im trying to get my divs to align vertically when making a template.
The problem is that the right div is way down the bottom of the page on the right hand side and the center div is aligned at least 1 character height below the left div which is the only one correctly aligned. I also cant see the footer div (maybe because the image is plain black along with the text.)
The left, right, center and footer div are within a container div. I previewed it in firefox and although the container image and borders are exactly where i want them, the div contents are all over the place.
Heres the css code, any help with this would be great. Ill also paste the Div ids and structure below the css awell.
Thanks in advance.
body{
margin: 0 auto;
background-color: #000000;
background-repeat: repeat;
text-align: center;}
#container {
width: 900px;
height: 759px;
margin: 0 auto;
border-left: 5px #ffffff solid;
border-right: 5px #ffffff solid;
background-repeat: no-repeat;
background-image: url(../slices/images/images/content-slice.jpg);}
#searchbox{
}
#header{
width: 900px;
height: 104px;
background-repeat: no-repeat;
background-image: url(../slices/Sf-Head-slice.jpg);
margin: 0 auto;
border-left: 5px #ffffff solid;
border-right: 5px #ffffff solid;
text-align: left;}
#header2{
width: 900px;
height: 108px;
background-repeat: no-repeat;
background-image: url(../slices/searchboxwithplayer-slice.jpg);
margin: 0 auto;
border-left:5px #ffffff solid;
border-right:5px #ffffff solid;
text-align: left;}
#footer{
width: 900px;
text-align: left;
margin: 0 auto;
height: 28px;
background-repeat: no-repeat;
background-image: url(../slices/images/footerslice.jpg);}
#left{
text-align: left;
margin: 0 auto;
width: 220px;
height: 752px;
float: left;}
#right{
text-align: left;
margin: 0 auto;
width: 220px;
height: 752px;
float: right;}
#center{
text-align: left;
margin: 0 auto;
height: 752px;
width: 400px;
}
Heres the divs
<body>
<div id="header">this is the header</div>
<div id="header2">this is header2
<div id="searchbox">this is the searchbox
</div>
</div>
<div id="container">this is the container
<div id="left">this is the left column</div>
<div id="center">this is the center column</div>
<div id="right">this is the right column</div>
<div id="footer">this is the footer</div>
</div>
</div>
</body>
The reason the columns aren't lining up beside each other is because the center column isn't floated. The margin: 0 auto also isn't helping things. The rule with floating columns is to make sure that the sum of all element widths you want beside each other is <= the width of their container. In your case you'll be ok because:
220 + 220 + 400 < 900
Once you float all the columns and then clear with the footer, you should be in business. I also changed how your footer background image is repeating based on the name (I'm assuming it's a thin slice that you want to tile horizontally).
#footer{
clear: both;
text-align: left;
height: 28px;
background: url(../slices/images/footerslice.jpg) repeat-x top left;
}
#left, #right, #center {
text-align: left;
height: 752px;
width: 220px;
}
#left {
float: left;
}
#right {
float: right;
}
#center{
float: left;
width: 400px;
}
I have no experience with Joomla and my CSS knowledge is to crude to supply a real answer, but if you want a working multi column layout you should definitely take a look at YAML (not the YAML language, thats another thing). Maybe you can take their CSS partky or as a whole. Even if you can't, their documentation is very descriptive and will teach you a lot about the caveats related to multi column layouts.
Related
I am facing a same problem. I'm trying to create two separate rows (marked as red background color) to be aligned horizontally in the center. One of the row on the left side of center part, and second one on the right side of the center part.
Do I need to add something or change some values? I've been trying to do this for 2 hours now.
Any help will be appreciated. Thank you :)
.others {
position: relative;
vertical-align: middle;
width: 70%;
background-color: #d0d0d0;
height: 500px;
margin: auto;
padding: 40px 15% 20px 15%;
display: table;
}
.others p {
margin: 0px;
height: 300px;
float: left;
background-color: red;
}
<DIV CLASS="others">
<P ID="leftside">
News will be shown here as they appear.
</P>
<P ID="rightside">
Here you will be able to see our products.
</P>
</DIV>
.others {
position: relative;
vertical-align: middle;
width: 70%;
background-color: #d0d0d0;
height: 500px;
margin: auto;
padding: 40px 15% 20px 15%;
display: table;
}
.others p {
margin: 0px auto;
height: 300px;
width:50%;
display-inline-block;
text-align:center;
float: left;
background-color: red;
}
<DIV CLASS="others">
<P ID="leftside">
News will be shown here as they appear.
</P>
<P ID="rightside">
Here you will be able to see our products.
</P>
</DIV>
Worked for me just by removing float:left; and add display:table-cell; to .others p.
Fiddle
.others p {
margin: 0px;
height: 300px;
background-color: red;
display:table-cell;
}
.others p {
margin: 0px;
height: 300px;
background-color: red;
display:inline-block;
}
i think you shouldnt use <p> for positioning.
use <div> instead.
also using float:left or float:right might solve your problem.
Read up on using floating items here:
http://www.w3schools.com/cssref/pr_class_float.asp
Also, when using floats, browsers will assume there is nothing inside your 'container' <div>.
So i'd also suggest you read up on using css attribute overflow.
http://www.w3schools.com/cssref/pr_pos_overflow.asp
.others
{
position: relative;
vertical-align: middle;
width: 70%;
background-color: #d0d0d0;
height: 500px;
margin: auto;
padding: 40px 15% 20px 15%;
display: table;
}
#leftside
{
display:inline-block;
margin: 0px;
height: 300px;
width:50%;
float: left;
background-color: red;
}
#rightside
{
display:inline-block;
margin: 0px;
height: 300px;
width:50%;
float: right;
background-color: green;
}
<DIV CLASS="others">
<P ID="leftside">
News will be shown here as they appear.
</P>
<P ID="rightside">
Here you will be able to see our products.
</P>
</DIV>
You just need to provide to p a width value because you are floating the p elements to the left, every p element into the container will get out of the normal document flow and flow from left to right.
Just add width: 50% to every p element. like this:
.others p {
margin: 0px;
height: 300px;
float: left;
background-color: red;
width:50%;
}
Also provide a clearfix or overflow:hidden; to the .others in order to contain the floated elements within it's body.
Here is a demo to work with
Edit: Almost forgot. If you want to gain control onto your layout, provide also a min-width and a max-width value to the body container, so it doesn't strech to much on wide screens, nor it is contained to much on narrower screens. Also, try a css framework, like bootstrap. It will give you fine control onto your layout.
Cheers!
Here is an image that illustrates my goal:
http://imgur.com/80v5bRk
What would be the best way to achieve a style that looks like this? By this, I am asking, how can I set up rules so that the spacing and locations of the buttons are perfectly aligned in the center (they are not aligned correctly right now). I was thinking of a div that wraps the whole thing together, a div that floats left holding the first angle and the title, and a second div that floats left holding the icons. The icons are from the font-awesome package and I do not understand how to align them correctly.
Something along the lines of this should do:
HTML:
<div class="bar">
<div class="first button"></div>
<dic class="second button"></div>
</div>
CSS:
.bar{
width: 960px;
height: 60px;
margin: 0 auto 0 auto;
padding: 5px;
}
.button {
width: 50px;
height: 100%;
float: right;
margin-right: 10px;
background-size: 50px 50px;
background-repeat: no-repeat;
background-position: center; /* This is what will centralize it vertically and horizontally */
}
.first { background-image: url('image.png') }
.second { background-image: url('image2.png') }
I hope this helped.
Well, its hard to answer it exactly unless you post what you currently have.
However, your on the right track.
What I would do:
Wrap the whole thing in a div (as you said)
float the text left (which you said as well)
float the icons right (not left)
As far as spacing, put a margin/padding left/right to the two buttons.
EDIT:
As per my discussion with Luiz Berti:
You are almost right.
Try this instead:
http://jsfiddle.net/GYPK5/1/
HTML
<div class="bar">
<div class="text">Lots of stuff here</div>
<div class="buttons">
<img src="http://icons.iconarchive.com/icons/led24.de/led/16/page-white-edit-icon.png" />
<img src="http://icons.iconarchive.com/icons/led24.de/led/16/bin-closed-icon.png" />
</div>
<div class="clear"> </div>
</div>
CSS
.bar {
width: 400px;
border: 1px solid black;
height: 20px;
font-size: 16px;
line-height: 20px;
}
.text {
margin-left: 20px;
float: left;
width: 200px;
}
.buttons {
float: right;
margin-right: 20px;
position: relative;
top: 2px;
}
.buttons img {
margin: 0 10px;
}
.clear {
clear: both;
width: 0;
height: 0;
}
I am attempting to float 3 divs within a container div. I thought it would be simple but I'm having difficulty keeping them evenly spread apart. As I want the website to be somewhat responsive, so I can't have the spacing specified in px.
CSS:
#circlecontain{background-color:green;height:200px; width:1200px; margin:auto;}
.circle{width:200px;height:200px;border-radius:100px;
font-family:Arial, Helvetica, sans-serif;font-size:20px;color:#fff;
line-height:150px;text-align:center;background: rgba(0,0,0,0.8);
margin:auto; display:inline-block; vertical-align:middle;
}
Thanks in advance
Hold them inside 3 div elements with a width of 33% each, and use margin: auto; on round divs, this way they will be equal.
Demo
<div class="wrap_me">
<div></div>
</div>
<div class="wrap_me">
<div></div>
</div>
<div class="wrap_me">
<div></div>
</div>
CSS
.wrap_me {
width: 33%;
border: 1px solid #f00;
float: left;
}
.wrap_me div {
width: 150px;
height: 150px;
border-radius: 100px;
border: 1px solid #ddd;
margin: auto;
}
You can also hold this inside a single container with a min-width property so that your elements don't wrap incase of insufficient width
What Mr.Alien said isn't wrong, but
I'm having difficulty keeping them evenly spread apart
If you have three divs you want to distribute even along the full width of the container, you can float the left-most div to the left, the right-most div to the right and the middle div will get float:none and margin: auto, like so:
.container {
width: 300px;
height: 100px;
}
.container div {
width: 25%;
height: 100%;
background: blue;
border-radius: 100%;
}
.inner-left {
float: left;
}
.inner-middle {
float: none;
margin: auto;
}
.inner-right{
float: right;
position: relative;
bottom: 100%;
}
See the jsfiddle.
EDIT:
updated fiddle - didn't save...
I'm trying to put three div together. One is on the left, one is in the middle, and one is on the right.
However, I'm experiencing a problem that the middle is not aligned properly.
My current HTML code:
<div class="three_contents">
<div class="left">Left</div>
<div class="right">Right</div>
<div class="center">Center</div>
</div>
My current CSS code:
.three_contents{
width: 900px;
border: 0px solid #000;
}
.left{float: left;
margin-top: 25px;
width: 290px;
height: 290px;}
.right{float: right;
margin-top: 25px;
width: 290px;
height: 290px;}
.center{display:block;
margin: 25px auto;
width: 290px;
height: 290px;}
However, when I add a 1px border in the the three_contents div, and the middle div is aligned. I have attached two screenshots and hopefully someone can help me to resolve this issue. Thanks a lot.
Problem with the middle div isn't aligned:
After I add the 1px border, and the middle div is aligned:
Put the margin only on the center div. Like so:
.three_contents
{
width: 900px;
border: 0;
}
.left
{
float: left;
border: solid 1px;
width: 290px;
height: 290px;
}
.right
{
float: right;
border: solid 1px;
width: 290px;
height: 290px;}
.center
{
margin: 25px auto;
display:block;
border: solid 1px;
width: 290px;
height: 290px;
}
I made a fiddle to show you this: http://jsfiddle.net/stakL/1/
EDIT: To be sincere, I also don't quite understand why it happens. But I can see that the margin-top property set on the left and right div's was taking the middle div's top position as the reference point to apply that margin.
On other words, the center div was 25px from the top, and the left and right div's were 25px from the middle div's top.
I have 2 wrappers, one inside the other, as per html below. The first wrapper contains a tile which scrolls down. Wrapper 2 has an image 940 X295px. Works beautifully in IE5 & IE8, but in IE7 the footer jumps up to wrapper2 and the text extends down, underneath and below.
This is my html:
<div id="wrapper">
<div id="header"></div>
<div id="wrapper2">
<div id="maincontent"></div>
<div id="navigation"></div>
</div>
<div id="footer"></div>
</div>
I have moved the closing div's everwhere with no success.
My css for the above divs are:
body {
margin-top: 0px;
padding-top: 0px;
background-image: url(../images/body_vert_tile.gif);
background-color: #C8BE86;
background-repeat: repeat-x;
}
#wrapper {
background-attachment: scroll;
background-image: url(../images/wrapper_horiz_tile.gif);
background-repeat: repeat-y;
margin-right: auto;
margin-left: auto;
width: 940px;
}
#wrapper2 {
background-image: url(../images/wrapper_2.jpg);
height: 295px;
margin-right: auto;
margin-left: auto;
background-position: left top;
}
#header {
width: 940px;
background-image: url(../images/header.jpg);
height: 345px;
margin-right: auto;
margin-left: auto;
}
#maincontent {
float: right;
width: 630px;
padding-right: 70px;
padding-left: 10px;
margin-top: -10px;
}
#maincontent_home {
float: right;
width: 420px;
padding-right: 10px;
padding-left: 10px;
margin-top: -10px;
}
#secondary_content {
float: right;
width: 190px;
padding-right: 70px;
margin-top: 30px;
padding-left: 20px;
}
#footer {
background-repeat: no-repeat;
background-position: left bottom;
width: 940px;
text-align: center;
clear: right;
background-image: url(../images/footer.jpg);
height: 145px;
margin-right: auto;
margin-left: auto;
#navigation {
float: right;
width: 130px;
padding-right: 10px;
padding-bottom: 10px;
background-repeat: repeat-y;
background-position: right top;
padding-top: 5px;
}
I'm pulling my hair out. Should I just ignore IE7? I'd really like to overcome this. The only way around this I have found is to have wrapper 2 sit below the header and close before the main content. I then set -ve margins at the top of the content and nav the same size as the height of the image in wrapper2. It worked, but i don't know if I should be doing things like this.
Your help would be greatly appreciated.
It would be great if you could provide an URL to check this behavior, but i would add a :
<div style="clear:both;"> </div>
after the closing of the navigation DIV
BTW, I your are not using any CSS reset, you should. I use blueprint, but there are many.
Alejandro suggested I remove the height of Wrapper 2 and add: background repeat: no repeat;
When I did this the image disappeared, but when I changed the height property to min:height: 295px; it worked beautifully. Thankyou Alejandro for pointing me in the right direction