I have a main div, and three divs inside of it. They are all given a width 30%, and they are all centered within the main div.
I used display: inline-block; so that the three divs appear next to each other, but when I give them a height of anything, the two left-most go down a bit, and the right one stays where it should. All that's inside the divs is just simple inputs, nothing that could dynamically increase the div's size.
How should I fix this?
It's quite hard to work out the issue without any live code but give these a go. For the DIVs inside the main DIV, assign the class vertical-align:top
Another option (or as well as) is to set the line-height to the desired height rather than the height.
If you have no luck with these, I suggest you put your html and css up on jsfiddle.
Yes. the three inside divs must be floated to the left so that they should align exactly. without floating, they can create problems in different browsers.
CSS Code
#wrapper { width: 100%; height: auto; margin: 0; padding: 0;}
.inner { width: 30%; float:left; min-height:50px; margin:0 5px 0 0;}
HTML Code
<div id="wrapper">
<div class="inner"></div>
<div class="inner"></div>
<div class="inner" style=" margin:0;"></div>
</div>
Here's a working solution. http://jsfiddle.net/j3zjg/
<style>
#container{
width:500px;
height:300px;
border:1px solid red;
}
#container div{
width:30%;
float:left;
height:40px;
background:red;
margin-right:5px;
}
</style>
<div id="container">
<div></div>
<div></div>
<div></div>
</div>
Related
I was under the impression that when using % or auto for margins on a div contained within another div the position would be calculated in respect to the parent div.
So if I have a div with height: 50%, margin-top: 25% and margin-bottom: 25% the box should centre vertically within the parent div.
When I do this though the div centres on the page not the parent div.
The CSS
div#header {
width: 100%;
height: 100px;
margin: 0px;
position: fixed;
}
div#leftnavigation {
height: 50%;
margin-top: 25%;
margin-bottom: 25%;
float: left;
}
And the HTML
<!--Title and navigation bar-->
<div id='header'>
<!--Left navigation container-->
<div id='leftnavigation'>
<p>efwfwgwegwegweg</p>
</div>
</div>
In my case there are other divs floated to the right of the one detailed above, but any one of them behaves the same way. I'm assuming I'm doing something daft but I've been over all the other questions I could find along these lines and still can't figure it out.
EDIT
Here's the JSFiddle as requested http://jsfiddle.net/ChtVv/
UPDATE
I've tried removing the margin constraints and setting the leftnavigation div to height: 100%, this works so the issue is with the margin attribute?
The reason it didn't work is that percentage-margins are percentages of the parent's width, not its height. You can tell this by using margin-top: 25px; margin-bottom: 25px;, and also by increasing the width of the right-panel in jsFiddle.
In all cases % (percentage) is a valid value, but needs to be used
with care; such values are calculated as a proportion of the parent
element’s width, and careless provision of values might have
unintended consequences.
W3 reference
CSS is tricky!! :D
This is a borrowed technique to centre vertically and horizontally, but it would involve changing your HTML and CSS. I am not sure how flexible you are with your code:
CSS:
#outer {width: 100%; border: 3px solid red;}
#middle {width: 100%; text-align: center;border: 3px solid green;}
#inner {width: 200px; margin-left: auto; margin-right: auto; text-align: left;border: 3px solid blue;}
/* Courtesy: http://www.jakpsatweb.cz/css/css-vertical-center-solution.html */
HTML
<!--Title and navigation bar-->
<div id='outer'>
<!--Left navigation container-->
<div id='middle'>
<p id="inner">efwfwgwegwegweg</p>
</div>
</div>
You can build upon this to achieve whatever you are after!
fiddle: http://jsfiddle.net/pratik136/ChtVv/2/
Ok, so there are a lot of reasons why this would not work.
The main reason would be that your container has position:fixed;
When adding position:fixed; to a element, it no longer reserved it's space in the DOM and won't contain it's children.
I have made a example of the best way (in my Opinion) to center your child both Vertically & Horizontally
Here is a demo.
Demo
And here is the code.
<div id="container">
<div id="child"></div>
</div>
#container{
width:100%;
height:500px;
background:#CCC;
margin:0;
}
#child{
width:50%;
height:50%;
background:#EEE;
position:relative;
top:25%;
left:25%;
}
I am trying to use CSS to get a DIV to fill the remaining page width, after a fixed-width div on the left (and below a fixed-height header)
The CSS I have is:
body{margin:0;padding:0}
#header{height: 100px; background:#ccccff;}
#left {position:absolute; left:0; top:100px; width:200px; background:#ccffcc;}
#main {position:relative; left:200px; background:#ffcccc;}
The HTML is:
<div id="header">Header stuff here</div>
<div id="left">Left stuff here</div>
<div id="main">Main stuff here</div>
(head and doctype omitted here for brevity)
When it is rendered, the main div is still full page width, meaning the right-hand edge is 200px off the right edge of the browser. How can I get the main div to fill the remaining width?
(eventually I will want to put other divs inside main, and make their widths expressed in % relative to the main div)
Is this even possible?
Don't use position. Use Floats. Float the "left" div left, set its width. Give the "main" div a left-margin of the width of the left div, and set the width to auto.
#left { float: left; width: 200px;}
#main {margin-left: 201px; width: auto;}
Example here: http://jsfiddle.net/GhtHp/1/
Instead of using positioning which is considered evil, just use floats.
#left {float:left; width:200px; background:#ccffcc;}
#main {margin-left:200px; background:#ffcccc;}
DEMO
Does this accomplish what you're looking for?
HTML -
<div id="header">Header stuff here</div>
<div id="left">Left stuff here</div>
<div id="main">Main stuff here</div>
CSS -
div {
border: 1px solid black;
}
#left {
float: left;
}
Jsfiddle - http://jsfiddle.net/xzWK5/
Yes, it's easily possible with CSS calc. Unfortunately CSS calc is only supported in Chrome so far.
Here's a better way:
HTML:
<div id="header"></div>
<div id="left"></div>
<div id="main"></div>
CSS:
#header{height: 100px; width: 100%; background:#ccccff}
#main{position: absolute; left: 200px; right: 0; background:#ffcccc}
#left{width: 200px; left: 0}
Having #main exactly 200px from the left and 0px from the right gives you the full width minus #left
I'm trying to achieve, that the div's will behave like an example on picture, using css:
Is there any clean way to do this? I achieve this using javascript to calculate "left" div height and "main" div width and height. But i dont like this solution...is there any way to do this using css only?
Edit:
Page must not have scrollbar...so page's height is always max 100%, and no more...
thanks
If the sidebar (or any other div) is 100% height, and on top you have a 30px header, so that causes your container to be 100% + 30px height.
In the future you will have in css3 calc():
http://hacks.mozilla.org/2010/06/css3-calc/
This will solve your problem.
But for now you can add overflow: hidden; to the html and body section, but I recommend calculate the height of the sidebar ( container height - header height) using Javascript.
Check fiddle here
If you mean the two-column layout, you do it with pure CSS like this:
.container {
background-color: #aaaaaa;
}
.left {
float: left;
width: 100px;
clear: left;
}
.right {
margin-left: 100px;
background-color: #888888;
}
and HTML:
<div class="container">
<div class="left">left</div>
<div class="right">right</div>
</div>
Live demo: jsFiddle
The div on top can be achieved without any special CSS. To place something below (a footer for example), you'll need to use clear: both.
Without any code it is hard to determine what you want. Here is a extremely simple version of what I believe you want.
HTML:
<div id="header">
</div>
<div id="side">
</div>
<div id="content">
</div>
CSS:
#header {
width:100%;
height:50px;
}
#side {
width:300px;
height:100%;
float:left;
}
#content {
width:660px;
height:100%;
float:left;
}
jsFiddle
Just wondering how to style a header like the attached image. Was thinking of using two divs, the left for the text and the right for the horizontal repeating image. Problem is I need the right div's width to change with respect to different header lengths.
Any help would be appreciated!
header image
You can do that in simple;
.header{
width:100%;
height:20px;
background:url('http://jsfiddle.net/favicon.png') repeat;
}
.header span{
background-color:#FFF;
display:inline-block;
height: 20px;
}
<div class="header"><span class="title">Header Text</span></div>
You can include this in various pages and the title space re-size accordingly.
Here is a working Live Demo
Use left and right DIVs with respective width and then to the right div use text-align: right; property so that the content loaded in right div will remain to right and increase to left depending on the size of content
<div class="header">
<div class="left"></div>
<div class="right"></div>
</div>
.header{overflow: hidden;} //Considering width: 1000px;
.left{float: left; width: 100px;}
.right{float: right; width: 900px; text-align: right;}
you could do it with just a <h1> tag for semantic reasons, and ad a background-image to it.
With padding-right you now can control the amount of how many times it should repeat itself and filling up the needed space.
Usually I would do this by either setting the margin to auto, using position:absolute, or via padding but unfortunately these will not work in this case. I need a div to be about 15 pixels off-center horizontally from the page. The tricky bit is it needs to scale correctly as the page widens. It seems to me that I would need to do this horizontal adjustment based on the center point, rather than the left hand side. How could I achieve this? Thanks.
Use a container div, which is centered, then its content you can give margin-left:npx - like so:
HTML
<div id="container">
<span id="green"> </span><br />
<span id="blue"> </span>
</div>
CSS
#container{width:100px; margin:auto auto; background-color:red;}
#container span{display:block; width:100%; }
#green{background-color:green; margin-left:10px;}
#blue{background-color:blue; margin-left:-10px;}
See the example coded up here - http://jsfiddle.net/Xpk8A/1/
give a wrapper with:
margin: auto;
position: absolute;
inside wrapper, put div:
position:relative;
left: -15px; (or whatever you want)
example page would help.
You can absolutely position your div and set the left attribute to 50%. Then, set the margin-left to 50% + 5px (whatever that is). This would only work if you have a fixed width on the box, however. For example, if the box is 200px wide, the margin-left would be -115px.
The key is to set width:100% and a fixed margin, as you can see in my example below
<style>
div {
background-color:red;
height:100px;
margin:0 auto;
width:100%;
margin-left:15px;
}
</style>
<div></div>
<html>
<body>
<div class="centered">
<div class="offcenter">
</div>
</div>
</body>
</html>
The css will be:
.centered
{
margin: 0 auto;
width:300px;
height:200px;
background-color:red;
}
.offcenter
{
background-color:blue;
width:285px;
height:inherit;
float:right;
}
http://jsfiddle.net/evbbq/
You can use display:inline-block for center the DIV then give your margin to it .
Like this:
.Parent{text-align:center;}
.Child{
display:inline-block;
text-align:left;
width:200px;
height:150px;
background:red;
margin-left:15px;
}
Check this fiddle http://jsfiddle.net/Xpk8A/2/
Remove margin-left:15px then click on Run button in the fiddle to see the different.