I have 3 divs. The 'middle' div needs to be centered in the containing element (a seperate div that is the width of the page, basically) while the other two divs should be on either side of the 'middle' div.
Here is what I've tried so far, but as you can see, if the left and right divs aren't even in width, they push the 'middle' div off center.
<div class='cont'>
<div class='name2'>The Man with Six Fingers</div>
<div class='vs'>VS.</div>
<div class='name1'>I. Montoya</div>
</div>
.cont{
position:fixed;
top:0px;
width:100%;
background-color:red;
text-align:center;
}
.cont >div{
display:inline-block;
}
http://jsfiddle.net/7TLSa/
The solution only needs to work in Webkit since this will be in a mobile app.
I adjusted the widths, min-width, and white space to tweak its responsiveness. Is this what you're looking for?
See DEMO
.name1, .name2 {
width:30%;
min-width:160px;
white-space:nowrap;
}
Related
My pages are structured as nested divs. They have padding and margin so inner divs are typically physically smaller than outer divs. However, in some cases I would like one of the inner divs (red box in the image below) to expand widthwise to match the left and right edges of the outermost div.
<div id="div-a">
<div id="div-b">
<div id="div-c">
<div id="div-d">
</div>
</div>
</div>
</div>
This is just an example -- the number of nested divs can vary. The width of the outermost div is variable. The heights of all the divs are also variable.
I have tried using absolute positioning, but this removes div-d from the document flow. Since I don't know the height of its content, I can't compensate. Any other suggestions? Thank you for any help.
#div-a {
position:relative;
}
#div-d {
position:absolute;
left:0;
right:0;
}
Could this approach be a solution?
#div-c {
position:relative;
}
#div-d {
position:absolute;
padding:0 -(div-c + div-b + div-a padding values) 0 -(div-c + div-b + div-a padding
values)}
#div-c {
display: flex;
align-items: center;
}
#div-d {
width: calc(100% + PADDINGS + BORDERS);
}
PADDINGS: sum of each parents divs padding.
BORDERS: sum of each parents borders.
Unfortunately I could not find a CSS-only solution for my particular problem. I had to resort to Javascript.
wrap the div that needs to be full-width with another div
<div id="div-a">
<div id="div-b">
<div id="div-c">
<div id="div-d-wrapper">
<div id="div-d">
</div>
</div>
</div>
</div>
</div>
use this CSS
#div-a {
position:relative;
}
#div-d {
position:absolute;
left:0;
right:0;
}
apply the following Javascript (using jQuery)
$('#div-d-wrapper').height($('#div-d').outerHeight());
div{
padding:10px;
border: 1px solid red;
}
#div-d{
margin-left:-32px;
margin-right:-32px;
}
i used hard code values to for the given div . My solution is to use Negative margins in css. When the div grows dynamically, you use javascript or jquery to find parent reach from child div and calculate the margins accordingly.
fiddle demo: https://jsfiddle.net/bqrxtLvd/
Source:
Negative margin css tricks
Detailed negative margin
I have up to 4 divs on the page that will have to 'sit next to' each other horizontally. Each div will have 100% width.
All, but the first one, will therefore appear off the page until I style it otherwise (ultimately using jQuery).
How can I style the divs in order to achieve this?
Markup:
<div class="wrapper">
<div class="panel">
</div>
<div class="panel">
</div>
<div class="panel">
</div>
<div class="panel">
</div>
</div>
What I've Tried
I've tried floating all of the divs left and setting the overflow of 'wrapper' to hidden. I've tried setting the display to inline-block of all the divs. I've tried position absolute on all the divs. I'm trying a combination of different things just hoping it'll work but there has to be a proper approach to this.
Tell me if some like this is what you want i use display:inline-block
http://jsfiddle.net/fdXLb/
Then i can do a better explanation.
if one div has a width of 100% there will be no space for another div to align next to this one.
so I would say to align them use only 20% width.
25% works also for 4 divs but then you can not use any borders, margin or padding.
also you can set a min-width in px.
have a look at this example: http://jsfiddle.net/3CpL8/
may it helps
.wrapper > div {
width:20%;
background-color:orange;
height:60px;
float:left;
min-width:100px;
margin:5px;
}
A nice trick is to use white-space: nowrap; to prevent divs moving to the next line. This is what your css would look like:
.wrapper {
white-space: nowrap;
overflow-x: hidden;
}
.wrapper > div {
width:100%;
background-color:red;
height:60px;
display: inline-block;
min-width:100px;
margin:5px;
}
Check out this Fiddle and use your browser's inspector it to see that the divs are still there, but off screen at the width you want. I assumed you'd want to continue using overflow-x: hidden; on the parent div so there wouldn't be an ugly scrollbar when doing the javascript side :)
Hello i found a very peculiar thing, apparently left is rendered different from right.
see this fiddle:
http://jsfiddle.net/Hn8At/2/
here is the html
<div id="wraper">
<div id="ribbon_ct">
<div class="ribbon left"></div>
<div class="ribbon right"></div>
</div>
</div>
and the css
body{ margin:0; padding:0px; }
#wraper{ width:800px; margin:0 auto; background:#eee;padding-top:500px;}
#ribbon_ct{ width:100%; background:#c00; height:400px; }
.ribbon{background:#0C9; width:30px; height:30px; position:relative;}
.left{float:left;}
.right{float:right;}
.ribbon.left{ left:-30px;}
.ribbon.right{ right:-30px;}
I have 2 green squares on either side, one causes a scrollbar, the other does not. You can only scroll the right one into view. any ideas as to why?
Its absolutely normal.
If an elements overflows the body from the left, it will be hidden, and from the right it will be scrolled.
use overflow:hidden; on #ribbon_ct if you want the right div to be hidden.
Your #ribbon_ct is 800px wide because of width: 100% of #wraper and centered.
When you don't give width to his parent (for ex: body {width:1000px;}) or widen the viewport you can't see the left green square, because you positioned left: -30px;.
Try your code not in jsfiddle but directly in browser.
And if #wraper was not centered, you can't see left square even when resizing,
I have code like this
<div class="container">
<div class="section">
<div class="left">
a profile pic and some text
</div>
<div class="right">
a wider div with much more text and some bio info
</div>
</div>
i would like a dotted border in between the two divs to separate the left column from the right. my problem is that no matter if i put the border on the left column or the right column it doesn't stretch to the bottom. if either column is shorter/longer than the other the border always stops before reaching the bottom looking cut off.
Try this:
html,body,.container, .section, .left, .right{height:100%}
.left, .right {border:1px dotted black;float:left;}
example: http://jsbin.com/agaza5
Make both your left and right divs stretch the full height of the container (section).
.left{ height:100%; }
.right{ height: 100%; }
I would set the height of your section div and then just set the children heights to 100%.
Check it out
Set the height property equally for both divs columns using CSS:
.left {
border:1px solid #ccc;
height:100px; /* you can use "100%" too, if you want */
}
.right {
height:100px; /* you can use "100%" too, if you want */
}
You can also use the min-height attribute if you want to create the same minimum height for both divs, but let only one div stretch further if its content grows.
I would also add that you should use more semantic names for your divs. What if one day you decided to move your left column and it was no longer on the left? You would have to rename everything!
So I got some divs... The aim here is to play with some hide-show effects.
<div class="container">
<div class="move">
Some dynamic content...
</div>
</div>
.container {
width:100px;
height:100%;
owerflow-y:hidden;
}
.move {
width:300px;
height:100%;
float:right;
}
The issue is that in ie7 the float right doesn't work. the .move div will stick left.
Is there any way to fix this ?
Thanks.
It is because your containers width is less than the contents.
ifyou choose the width of .container bigger, you'll see the effekt is working. If you want the .move to be in the container by DOM-Tree but not on the screen, use position: absolute.
You can use text-align:right instead of float:right with your current widths(Inner DIV with More than the Outer DIV width).