I want to create large button style divs in the centre of the page and for the most part, it is working. The only thing is that I want some space between them and I just can't seem to get it to work. Below is my CSS. What I have done is create 1 div called Wrapper and then created 2 more divs inside, one called topleft, the other is topright. At this stage, there are just those 2 divs, but (And the reason why the inner divs are called top) I might want to add additional divs on either the same line or perhaps the next line at a later time.
I kept reading that margin is the way to do it, but it won't work with my existing code. Is it because I am already using it in WRAPPER in order to get them centred? I had some trouble getting it to align the way I wanted and it does look the way I wanted, but I suspect my issue is because maybe I centred and aligned them incorrectly if that makes sense?
Basically, my question is how can I get some space between topleft and topright?
.wrapper {
margin: 0 auto;
width:600px;
}
.topleft {
height: 200px;
width: 300px;
vertical-align: middle;
display: table-cell;
border-radius: 15px;
background-color: rgb(0,178,219);
}
.topright {
height: 200px;
width: 300px;
vertical-align: middle;
display: table-cell;
border-radius: 15px;
background-color: rgb(134,197,73);
}
My HTML is simple:
<div class="wrapper">
<div class="topleft"> ENERGY </div>
<div class="topright"> MINERALS </div>
</div>
Check out this jsfiddle
http://jsfiddle.net/peter/YmKc4/
Updated CSS
.wrapper {
margin: 0 auto;
width:600px;
}
.topleft {
height: 200px;
width: 280px;
border-radius: 15px;
background-color: rgb(0,178,219);
float:left;
line-height:200px;
margin:0 5px 0;
}
.topright {
height: 200px;
width: 280px;
border-radius: 15px;
background-color: rgb(134,197,73);
float:left;
line-height:200px;
margin:0 5px 0;
}
When you set a line-height to the same height as your div it'll center the content vertically. And floating the divs left I think is a little better than setting their display to table-cell. You also need to reduce the width when setting a margin to account for the margins pixels on either side
your "wrapper" div is 600px, and each internal div is 300px. That leaves no room for any space?
Related
I have two child divs (inline-block) inside a wrapper div. I want the left Div to be centered and the right one simply on the right of the left div.
<div id="Wrapper1"><div id="leftElement1">LEFT ELEMENT</div><div id="rightElement1">RIGHT</div></div>
The Problem is, if I use margin-left to reposition the whole wrapper, the Left Element is not centered on small screen sizes.
If I center leftElement1 and use position: absolute to position rightElement1 the Warpper Div does not adjust its width and height according to its children.
For a better understanding check http://jsfiddle.net/aaq810gs/6/
Any help is appreciated!
If i understand right you want something like this:
#rightElement1 {
background-color: blue;
position: relative;
width: 100px;
display: inline-block;
height: 50px;
float: right;
top: -100px;
}
Applied in your first example.
fiddle
Or something like this:
#rightElement1 {
background-color: blue;
position: fixed;
width: 100px;
display: inline-block;
}
fiddle
I am not really sure if I get exactly what you mean, but I think something like this could work for you.
- You better switch to %, because than it will work better on mobile devices.
- Second thing is adding margin:0 auto; for #leftElement1 so it stays in the middle. #rightElement2 will just stick to it on the right, because it is inline-block.
Now you can add whatever margin to the wrapper and it stays the same.
Fiddle http://jsfiddle.net/stassel/vzx6fm55/
HTML:
<div id="Wrapper1">
<div id="leftElement1">LEFT ELEMENT</div>
<div id="rightElement1">RIGHT</div>
</div>
CSS:
#Wrapper1 {
width: 90%;
background-color: red;
margin: 0 auto;
white-space: nowrap;
padding: 10px;
margin-left:10%;}
#rightElement1 {
background-color: blue;
width: 10%;
display: inline-block;
height: 50px;}
#leftElement1 {
background-color: green;
width: 60%;
margin:0 auto;
display: inline-block;}
div {
height: 100px;
text-align: center;
color: white;}
SOLVED
Thank you for all your answers! Unfortunately I wasn't able to describe my Question properly, so none of the solutions worked.
Finally I was able to solve the problem myself. The Key to the solution was another centered outer wrapper, with a fixed size of the to-be-centered Element and overflow: visible. The inner content overlaps now the outer wrapper.
#outerWrapper {
width: 700px;
overflow: visible;
margin: 0 auto;
}
#Wrapper {
width: 810px;
background-color: red;
}
http://jsfiddle.net/aaq810gs/9/
I have a footer content that is overlapping the wrapper div in my css and html, when I changed height to auto it didnt work.
below is an example of the page I'm working on.
Wrapper CSS
#wrapper {
width: 1030px;
height: 600px;
margin: 20px auto auto auto;
padding: 0;
background: url(wrapper.png);
}
Footer CSS
.footer{
width: 1000px;
padding: 60px 0 0 30px;
height: auto;
float: right;
clear: both;
background: url(footer_bg.gif) no-repeat top right;
text-align: center;
}
Example
You need to clear your floats in the .content_left and content_right columns and remove the height associated with your #wrapper:
http://jsfiddle.net/L6acE/3/
There's a few different methods for clearing floats. I went with a real simple method of just adding a <div style="clear:both;"> after both columns as discussed here:
http://css-tricks.com/the-how-and-why-of-clearing-floats/
But I'd generally use a clearfix method discussed here:
http://nicolasgallagher.com/micro-clearfix-hack/
I also added in some word-wrap:break-word CSS for your left column to wrap all your dummy content.
As the title says, I need two divs to be equally high. They should be as high as it needs to be for the content to fit. The current CSS is:
.portfolioleft{
float:left;
width:189px;
background-color: #436FAC;
min-height: 100px;
height: auto;
color: #FFF;
padding: 20px;
margin-bottom: 20px;
border-radius: 10px;
}
.portfolioleft img{
border-radius: 10px;
}
.portfolioright{
float:right;
width:500px;
background-color: #436FAC;
min-height: 100px;
height: auto;
color: #FFF;
padding: 20px;
margin-bottom: 20px;
border-radius: 10px;
}
.portfolioright a{
color:#FFFFFF;
}
and the html for the divs is:
<div class="portfolioleft"><img src="img" alt="img" width="189" height="311" /></div>
<div class="portfolioright">
<h2>Title</h2>
<p>Text</p>
</div>
<div class="clear"> </div>
CSS alone cannot tackle this feat (unless you want a hack solution where you can use an image). You will need to implement a JS solution. Since the content is dynamic and you do not know how high the columns will be, you will need to access the DOM to determine the height of the tallest column then apply to the indicated columns. I use the following regularly and it works quite well and is easy to implement.
http://www.jainaewen.com/files/javascript/jquery/equal-height-columns.html
Unfortunately this is a tricky problem in CSS. If you only want to extend the background color of your left sidebar to the bottom of the section (with its height defined by the right div), try wrapping them inside a parent div (which scales to the height of the right div), then positioning the left div with position:absolute and height of 100% like so:
<div class="portfolio">
<div class="portfolioleft">...</div>
<div class="portfolioright">...</div>
</div>
.portfolio {
position: relative;
background: white;
}
.portfolio .portfolioleft {
position: absolute;
left: 0;
top: 0;
width: 200px;
height: 100%;
background: #436FAC;
}
.portfolio .portfolioright {
margin-left: 200px;
}
If BOTH sides are dynamic and you need both heights to match, the only surefire way to make it work across all major browsers is to resort to a table-based layout with two columns, as karmically bad as that might be.
cell properties in your left right div
i checked your code and replace the float into display table-cell
you can check to this live http://jsfiddle.net/rohitazad/prMLh/1/
I have a series of buttons on my website that have I want to be at 100% width with a fixed column on the right and a flexible one on the left.
My first thought on how to do this was to use a liquid page layout and just use it on a div instead of the whole page. My results are below:
This image is what happens when the page is displayed so that the link can fit within the box.
If the page is scaled down however, I want the right column (set at 70px) to fill the entire height and align the text horizontally.
The code I am currently using to produce those results is this:
<li class="manage-files-list">
<div class="container">
<a class="right" target="_blank" href="">view</a>
<div class="left">
</div>
</div>
</li>
And
li.manage-files-list {
width: 100%;
display: table;
background-color:rgba(0,0,0,.05);
}
.container{
border-bottom:1px solid white;
color:#666;
text-shadow: 0 1px 0 #fff;
}
.left {
margin-right:70px;
word-break: break-all;
height:100%;
border-right:1px solid #fff;
}
.right {
width: 70px;
float: right;
text-align: center;
background-color:#333;
display:inline-table !important;
vertical-align: middle;
height:100%;
}
The only other requirement I can think of is that it needs to be wrapped in an <li> tag, but I don't see why that would be a problem.
Since it looks like you are okay using display: table*; values, here's a jsFiddle showing a solution using that.
It sets both .left and .right to display table cell, stops floating .right and instead moves it to be the second element. The issue was that your floating was causing the browser to ignore the height and the display property and just treat it as a floated block.
Also, making sure you are aware, these solutions using display: table*; are compatible IE8+
Although I don't really recommend using .left and .right as class names, the solution really only requires you to set overflow: hidden and word-wrap: break-word for your .left <div>.
.right { float: right; }
.left {
word-wrap: break-word;
overflow: hidden; }
Preview: http://jsfiddle.net/Wexcode/HzpJu/
Take a look here http://www.basenharald.nl/3d.
For the home part i put on some black borders so you can see what i mean.
The problem:
I need to position the 2 blocks (the "hey"block and the right part) next to each other in the center and position them individual from there on out.
The logical thing to do is to use display: inline block. Now the problem is that it does not valign top, so i cannot position them with margins.
Basically what i want to do is position the "hey"part slightly to the left and the "right"part slightly to the right and a tat downwards.
What is the best way to do so? It needs to be centered all time cause of the perspective effect and resolutions.
Hope i am clear enough, otherwise just ask.
this is the css part i am talking about:
#home-welkom { text-align:left; width: 465px; margin: 360px 400px 100px; 230px; margin: 0 auto; display: inline-block; color:#787778; font-size:11px; border:1px solid black; }
#home-right { text-align:left; width: 330px; margin: 50px 0px 0 0; position: relative; margin: 0 auto; display: inline-block; border:1px solid black; }
Also not that the margin property does not influence the divs at all
You're going to have to rethink your design strategy. Here's a few pointers:
Use divs instead of lists to layout your page (lists are good for menus, etc)
margins can only be used once per class
use div floats to position your divs side by side
store your javascripts externally this way your code will be cleaner
Now for your question this is what you're looking for to position your elements:
<div id="wrapper" style="position: relative; margin: 0 auto; width: 800px; text-align: left">
<div id="leftcol" style="float: left; width: 400px;">left column</div>
<div id="rightcol" style="float: left; width: 400px;">right column</div>
</div>
Finally I would make sure and validate my code and you can do so here: http://validator.w3.org/
Hope this helps.