Having problem with the middle Div not expanding to the width http://acs.graphicsmayhem.com/images/middiv.jpg
Ok, how do I get the Middle div to expand to it's entirety?? I've been wrestling with this issue for hours now. Please can anyone help me?? I'm not going to use tables, I know this has to be possible.
Thanks.
Set a left and right margin equal to the left and right floated div + thos 5px gap you need in between.
That would be:
margin:0 205px;
and do not float the mid div. Place the right floated div in front of left floated, and the mid div as last in html (eliminates IE6 bug).
A lot has been written on the Simple, Ideal, Intuitive Three-Column Layout. This one is pretty good, and I've found it to be relatively easily modifiable, the two times I've used it: http://matthewjamestaylor.com/blog/perfect-3-column.htm
That ought to work:
width: 100%;
margin-left: 205px;
margin-right: 205px;
You also won't need floating on that div, then.
Not sure why you're floating the top div. Assuming:
<div id="container">
<div id="header">...</div>
<div id="content">
<div id="left">...</div>
<div id="main">...</div>
<div id="right">...</div>
</div>
</div>
ten:
#container { margin: 0 auto; /* fixed or floating width */ }
#header { margin: 5px; }
#container { overflow: auto; margin: 5px; }
#left { float: left; width: 200px; }
#right { float: right; width: 200px; }
#content { margin: 0 205px; }
Related
How can I float an image left of a div, and maintain that the div aligns bottom with the logo?
I swear I've done this before. I can't figure out how I did it though.
See example here
Why float at all? Just using display: inline-block should inherently give you the behavior looking for. Example: https://jsfiddle.net/8sj12do1/
.logo{
width: 200px;
height: 200px;
display: inline-block;
background: red;
}
.link{
display: inline;
}
<div class="logo"></div>
<div class="link">Hi</div>
<div class="link">Hi</div>
<div class="link">Hi</div>
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'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>
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.