I've gotten blind on this one.. I came across other similar topic but none of them helped in the ind.
Long story short, I cant the "a,b,c,d" boxes in the center of the parent div - they need to be aligned to the boxed beneath, so the left is in the very left and the right is all the way to the right.
I've posted my code here in this fiddle, so you can see:
http://jsfiddle.net/sdHhp/
and my code: .right_content_wrap{ width: 300px; height: 250px; background: #e3e3e3; float: right; margin: 15px 0px 0px 0px; }
.featured_items_wrap{ width: 980px; height: 140px; background: blue; text-align: center;}
<div class="content_wrap">
<div class="featured_items_wrap">
<div class="featured_item">a</div>
<div class="featured_item">b</div>
<div class="featured_item">c</div>
<div class="featured_item">d</div>
</div>
If you have any question regarding my issue, feel free to write me!
I'm looking forward to a possible solution!
Thanks a lot and have a great evening ahead!
You need to margin: auto on the child divs. Also, you needed to make sure that the child divs are not as wide as the wrapper. I made them 75% in the demo and it works.
div {
width: 75%;
margin: auto;
}
http://jsfiddle.net/sdHhp/4/
EDIT: Note that this is on the wrapper in your JSFiddle, as that is what holds your child divs.
Further EDIT: I realize that I misunderstood you at first. I believe I have gotten your JSFiddle how you wanted it. Check this one out:
http://jsfiddle.net/sdHhp/9/
Expanding on Chad's anwer if you wanted exactly set within the div you can set a margin of 25px; of course it will vary with size, etc. http://jsfiddle.net/r2pLP/1/
div {
border: 1px solid black;
}
#one {
height: 100px;
width: 100px;
}
#two {
height: 50px;
width: 50px;
margin: 25px;
}
<div id="one">
<div id="two"></div>
</div>
Related
I'm trying to render column header text vertically, so the columns are narrow. I cannot seem to get the text to rotate and stay within the div.
I've made a quick jsfiddle.
https://jsfiddle.net/DaveC426914/w674sLbL/9/
My "pre-problem" is that my demo is not rendering correctly.
It's repeating the data three times i.e. three 17s, three 18 and three 19s. I don't know why.
(The barebones Angular fiddle I started from did not contain a div ng-app="myApp" so I had to add it or the angular is never applied. I thought maybe that had something to do with it, but remving this div breaks the app.)
Once I fix that, my real problem is that I can't get the text to behave. It should fall within the 100px tall, 20px narrow boxes that should be flush against each other, so that he columns are only 20px or so wide. They are rendering 100px wide.
<div class="table-header-cell" ng-repeat="item in headerDates">
{{item.date}}
</div>
.table-header-cell {
display: inline-block;
border: 1px solid grey;
margin: 1px 1px 5px;
height: 30px;
transform: rotate(-90deg);
transform-origin: left bottom;
width: 100px;
}
I've tried variants of nesting a div within a div, and applying the rotation to outer or inner divs. I've also tried setting width to 100px and height to 20px in the hopes that it applies the dimensioning before the rotation, but so far no combination has worked.
Try wrapping the text in an internal div and apply transforming and margin properties to that instead of all width and rotation on a single div.
Use the following html:
<div ng-app="myApp">
<div ng-controller="MyCtrl">
<div class="table-header-cell" ng-repeat="item in headerDates">
<div class="innertext">
{{item.date}}
</div>
</div>
</div>
</div>
and the css:
.table-header-cell {
display: inline-block;
border: 1px solid grey;
margin: 1px 1px 5px;
width: 30px;
height:90px;
}
.table-header-cell .innertext {
transform: rotate(-90deg);
width: 150px;
margin: 0 -60px;
}
This should give you the results your looking for hopefully.
If this helps please mark the answer and vote it. Thanks
For the angular ng-repeat issue, you need to make sure your load type is "No wrap in Body" for your JavaScript, also you were loading Angular twice so I removed the second load.
And for the rotation, you should not rotate the container, but create an inner container and rotate on that.
<div ng-app="myApp">
<div ng-controller="MyCtrl">
<div class="table-header-cell" ng-repeat="item in headerDates">
<div class="cell">
{{item.date}}
</div>
</div>
</div>
</div>
.table-header-cell {
display: inline-block;
border: 1px solid grey;
margin: 1px 1px 5px;
height: 100px;
width: 30px;
}
.cell {
transform: rotate(-90deg);
margin-left: -30px;
margin-top: 30px;
width: 100px;
}
Here is the corrected fiddle: https://jsfiddle.net/w674sLbL/10/
Hope this helps.
I can't make it any clearer than this, sorry. I want to properly align 4 divs (on a width of 1150px as that is max-width of the content div) and upon resizing when it can't do 4, 3 in the center etc etc)
On >1150px screens it would/should like this: http://i.imgur.com/KaOPqZK.png. Now, the closest I can come is this: http://i.imgur.com/6khwQkR.png. I can set the first-child margin to 0 on the left one, but as there are multiple rows, those would still have the padding. Creating new rows as divs isn't possible either, because that would ruin everything when it's resized and only shows 3/1 on both rows.
When resizing it should center, with even margins on all sides, and not like this as it is right now: http://i.imgur.com/GiR1nZ2.png.
Basically all the code I have right now is this, simply because I know of no other way.
div.project-container {
float: left;
margin: 0 8px 30px 8px;
position: relative;
width: 270px;
}
I'm guessing it has to be Javascript who rescues the day, and I'm fine with that. Pointers in the right direction, examples on the internets, all is welcome. Thank you.
Adapted from an old answer :
HTML
<div id="container">
<div class="obj">1</div>
<div class="obj">2</div>
<div class="obj">3</div>
<div class="obj">4</div>
<div class="obj">5</div>
<div class="obj">6</div>
<div class="obj">7</div>
<div class="obj push"></div>
<div class="obj push"></div>
<div class="pushend"></div>
</div>
CSS
#container
{
max-width: 980px;
background-color: lavender;
display: inline-block;
text-align: justify;
}
.obj
{
width: 180px;
height: 180px;
background-color: lightgreen;
display: inline-block;
margin-bottom: 20px;
}
.obj.push {
height: 0px
}
.pushend {
width: 100%;
height: 0px;
display: inline-block;
}
demo
I'm having trouble because I have a div I want to center and what I have
usually been told to do is this:
width: 700px;
margin-left: auto;
margin-right: auto;
the trouble is, this is for if you want the div to be a fixed width. I want the div
to adjust its size based on the text in the div, and still be centered. I tried:
width: auto;
margin-left: auto;
margin-right: auto;
but this didn't work. It stretches the div to fill up the screen when I do this.
Anyone know what to do here?
for parent block or body - text-align:center;
for centerd block- display:inline-block;
.center {
display: inline-block;
background: red;
}
body {
text-align: center;
}
<div class="center">
<p contenteditable="true"> write text </p>
</div>
DEMO http://jsfiddle.net/RXP4F/
Content Editable MDN
have you tried the approach shown here?
http://www.tightcss.com/centering/center_variable_width.htm
basically.
put your content inside a floated div
put that floated div within another floated div
put left: 50%, position relative on outer div
put left: -50%, position relative on inner div
finally, nest everything in one more div with overflow:hidden
.outermost-div{
background-color: blue;
overflow:hidden;
}
.inner-div{
float:left;
left:50%;
background-color: yellow;
position: relative;
}
.centerthisdiv {
position:relative;
left: -50%;
background-color: green;
float:right;
width:auto;
}
here is my jsfiddle demonstration:
http://jsfiddle.net/wbhyX/1/
Use margin:
0px auto; and display: table;
There are example:
https://jsfiddle.net/da8p4zdr/
You might want to try CSS display:table-cell or display:table
Try this structure.
<div class="container">
<div class="center_div">
</div>
</div>
.container{
float: left;
left: 50%;
position: relative;
}
.center_div{
position: relative;
left: -50%;
float: left;
}
zloctb's answer on Aug 30 '13 at 4:14 actually worked in principle but was incomplete. If you want your element width to be 'auto' based on the contents within it AND centered within its parent BUT with the contents inside the CHILD element left-aligned, do the following (because it really is the simplest way):
.parent {
width: 100%;
text-align: center;
}
.parent div.child {
display: inline-block;
text-align: left;
width: auto;
}
(Obviously, if you just wanted everything strictly centered, you would not need the code for the child element.)
EDITED:
use table, it could be easier to style. Then add div into the tr
.outer-container {
position: relative;
left: 50%;
float: left;
clear: both;
margin: 10px 0;
text-align: left;
}
.inner-container {
background: red;
position: relative;
left: -50%;
text-align: left;
}
Centering an element horizontally can get a little weird, as the functionality isn't very intuitive. Really, you need to play games with text-align:center; and margin:auto, and you'll need to know when to use which.
For example, if I want to center the contents of an element (raw-text), including buttons and inputs, I can use text-align:center.
.text-center {
text-align:center;
}
<div class="text-center" style="border:1px dashed blue;padding:6px;" >
My contents are centered! That includes my <input placeholder="inputs" /> and my <button>buttons.</button>
</div>
If we add other elements to our container, those elements will have their width forced to 100%. This helps us emulate that it is centered because technically, at 100%, it is centered! Silly, isn't it?
.text-center {
text-align:center;
}
<div class="text-center" style="border:1px dashed blue;padding:6px;" >
My contents are centered! That includes my <input placeholder="inputs" /> and my <button>buttons.</button>
<p style="background-color:orange;width:auto" >Even though my width is explicitly defined as "auto," I still have 100% width! What gives?!</p>
</div>
If your width property IS defined though, then you can use the margin: auto style to center it within the parent.
<div style="margin:auto;border:1px solid black;width:300px;" >
I am centered!
</div>
You need to determine which solution is best for you. I wish I could help more, but it is hard to know what solution will best fit your needs when you haven't provided the HTML for you problem!
Either way, I hope this JSFiddle helps clear things up!
I have this basic HTML structure:
<div id="left-column"></div>
<div id="content"></div>
<div id="right-column"></div>
And this css:
#left-column
{
padding-top: 25px;
width: 80px;
background: url('../../common/images/black70.png');
height: 100%;
float: left;
margin-right: 5px;
}
#content
{
padding: 5px;
}
#right-column
{
padding-top: 25px;
width: 190px;
background: url('../../common/images/black40.png');
height: 100%;
float: right;
}
The problem is content padding is being propagated to right column:
How can I avoid this?
Thanks
The problem is your #right-column is after #content so in the document flow, it will start after the content, which has 10px height from its top and bottom padding.
If you re-order your HTML like so, it fixes your issue.
<div id="left-column"></div>
<div id="right-column"></div>
<div id="content"></div>
Here's a jsfiddle
If you've got floating things and non-floating things, the floating things should always come before the non-floating ones in the source.
In your case, the content is rendered first, and then the right-column below that.
Ok so I have a website and the entire thing is wrapped in a container. This container is centered with margin:auto. I would like to float a piece of content to the right of this centered container and have it sort of stick to the side of it no matter if the user resizes the browser window, etc. I'm wondering if there's a real simple way to do this rather than adding another huge div, giving it width and floating the centered portion to the left and the piece of content to the right. Thanks!
Piggybacking on #NickAllen, you want to use absolute positioning so that the width of the sidebar isn't included in the centering on the primary container.
#container {
position: relative;
width: 500px;
border: 1px solid #f00;
margin: 0px auto;
}
#sidebar {
position: absolute;
width: 200px;
right: -200px;
border: 1px solid #0f0;
}
<div id="container">
<div id="sidebar">
[ sidebar content ]<br>
[ sidebar content ]<br>
</div>
[content]<br>
[content]<br>
[content]<br>
</div>
Maybe I'm misunderstanding your question, but isn't this what you want:
#container {
width: 960px;
margin: 0px auto;
}
#sidebar {
float: right;
}
<div id="container">
<div id="sidebar">
some content
</div>
</div>
Give the container div the property position: relative; place your floating div as the first child of the container div and give it
#floatingDiv
{
position: absolute;
top: 0;
right: -{widthOfFloatedDiv};
}
I think that will work, but untested
Okay so tested it and it works
<div style="position: relative; width: 980px; margin: 0 auto; border: 1px solid #000; height: 400px;">
<div style="position: absolute; top: 0; right: -200px; width: 200px;">
<p>Floated DIV</p>
</div>
<p>container div</p>
</div>
Old question, but contributing since other answers were kinda lacking that "something" and it's still on top of Google. The simplest, cleanest way to achieve this is with two wrappers.
<div class="bigWrapper">
<div class="sidebar">Hello, I'm your sidebar</div>
<div class="smallWrapper">
Put the thing you want to center here.
</div>
</div>
With the following css:
.bigWrapper {
width: 1000px;
height: auto;
margin: auto;
}
.smallWrapper {
width: 500px;
height: auto;
margin: auto;
}
.sidebar {
width: 250px;
float: left;
height: auto;
}
Floating is the way to go for this. They will always stick together, unless the container is smaller than the sum of their widths.
Tip: make sure your container is wide enough to hold both inner divs; if not, and the user has a narrower window, they will show one below the other.