Hi all been searching hard but found various answers that doesn't seem to resolve my issue.
I have one div box that needs to be vertically align centered to the div box next to it matching its height which is not defined as the content will change
But i need the content in the left box to be centered no matter what the height of the div box next to it.
any help would be appreciated.
Thanks
<div class="container">
<div class="leftCol">
Content or image in here needs to be vertical center based on div next to it height <
/div>
<div class="rightCol">
Content here
</div>
</div>
Here is an example using CSS tables.
.table-panel {
display: table;
}
.table-panel div {
display: table-cell;
vertical-align: middle;
border: 1px dotted gray;
}
<div class="table-panel">
<div>Left panel</div>
<div>Right panel: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eu pulvinar risus. Vestibulum imperdiet velit nisi, eget ullamcorper urna rutrum vel. Aliquam tristique elit augue, nec lobortis eros pretium quis. Proin ac quam pretium,
fringilla est et, sodales erat. Cras quis odio est. Integer ornare, neque in efficitur ultricies, justo magna ornare enim, quis dictum enim ipsum vel urna. Cras consectetur orci id quam cursus feugiat. Proin laoreet ullamcorper est vitae sagittis.
Aliquam faucibus elit sed sodales varius. Phasellus maximus turpis non nisl lobortis, sit amet efficitur lacus suscipit. Nunc a ligula a est feugiat mollis in a lacus.</div>
</div>
If I understand your question right what you are looking for is a wrapper around the two left- and right-boxes. Then inside the wrapper you want the two boxes to be inline-blocks and with vertical-align:middle perhaps?
See this Fiddle:
<div id="wrap">
<div class="left-box"></div>
<div class="right-box"></div>
</div>
#wrap{
width:250px;
height:auto;
background:#efefef;
}
.left-box{
display:inline-block;
width:100px;
height:150px;
background:#00ff00;
vertical-align:middle;
}
.right-box{
display:inline-block;
width:100px;
height:180px;
background:#ff0000;
vertical-align:middle;
}
http://jsfiddle.net/0kpdskf2/
Is this what you want?
Related
I don't want to just place text within an image. I want the text it to begin over the bottom-center of the image and to be able to run to the right, outside of the image.
Think of the stackoverflow site image above (if the text wasn't actually part of the image).
Consider if the orange bars continued till it was over the 'K'
Here is a crude example (# represents the image).
#################
#################
#####
##### TEXT GOES HERE
#####
I hope that I was able to adequately explain.
It would be impractical to list everything that I have tried, maainly because I didn't keep track of every single thing I have tried (sfd).
<td valign="left">
<div style="float:left;">
<img src="image.png" />
</div>
<div style="float:left;vertical-align:bottom; margin-right:100px">
<asp:Label ID="Label1" runat="server" style="font-size:1.5em;" >TEXT TEXT TEXT TEXT</asp:Label>
</div>
</td>
i'm not 100% on the solution you want, but i imagine it's something like this?
http://jsfiddle.net/ujL4pwx9/1/
HTML
<div class="foo">
<img src= "http://farm9.staticflickr.com/8378/8559402848_9fcd90d20b_b.jpg"/>
<p> this is my text and it goes outside of the image when needed </p>
</div>
CSS
div.foo{
position:relative;
width: 300px;
}
img{
width:300px;
}
p{
position:absolute;
width:100%;
right:-50%;
bottom:0;
margin:0;
background:white;
border:solid 1px black;
}
make the div containing both the img and text relative then you can make the text absolute and decide where the edge will reach. as shown in the jsfiddle above.
is this what you meant?
but personally i'd not use img and instead use a background-image
http://jsfiddle.net/9ka1fq2j/3/
HTML
<div class="foo">
<p> this is my text and it goes outside of the image when needed </p>
</div>
CSS
div.foo{
position:relative;
width: 300px;
height:300px;
background-image:url(http://farm9.staticflickr.com/8378/8559402848_9fcd90d20b_b.jpg);
background-size:cover;
}
p{
position:absolute;
width:100%;
right:-50%;
bottom:0;
margin:0;
background:white;
border:solid 1px black;
}
When the size of the image is known, this is relatively simple: just give the text a background color (otherwise it is transparent by default) and a negative left margin of half the image's width.
span {
background: white;
margin-left: -70px;
}
<img src="http://lorempixel.com/140/140/city" />
<span>Long descriptive caption</span>
That's it. For cosmetic purposes, you could wrap it in a div so that it can placed on its own. Secondly, the above solution aligns the bottom of the image with the baseline of the text instead of the bottom of the text. If you want both fixed as well, then use this slightly more complex solution:
div {
float: left;
}
img {
vertical-align: bottom;
}
span {
background: white;
margin-left: -70px;
}
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed commodo tristique ante in rhoncus. Vivamus auctor nec massa elementum mattis. Nunc tempor metus quam, quis varius nibh posuere eu. Suspendisse vitae iaculis ex, id lacinia nunc.</p>
<div>
<img src="http://lorempixel.com/140/140/city" />
<span>Long descriptive caption</span>
</div>
<p>Sed gravida congue ligula. Cras dignissim varius aliquet. Morbi semper nulla eget mauris feugiat accumsan. Aenean iaculis nisl a erat interdum bibendum. Nullam eu urna tempus, efficitur urna sit amet, vestibulum lorem. Duis tincidunt, nunc id semper maximus, ante lorem suscipit orci, nec laoreet libero dui in odio. Mauris in mi at dui aliquam vestibulum id non metus. Sed et enim ut metus tristique tempus. In tempus purus a eros imperdiet porttitor. Fusce faucibus, nisl at vestibulum suscipit, tellus magna tincidunt ante, at ultrices nulla libero non quam.</p>
<p>Ut orci nunc, cursus eget quam id, malesuada consequat odio. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut ullamcorper nunc. Integer luctus faucibus augue, ac fermentum mi bibendum sed. Donec ultrices pulvinar tellus. Praesent mollis euismod erat eu semper. Pellentesque pretium interdum nibh sed aliquet. Etiam vehicula aliquam ligula id imperdiet. Cras sodales purus leo, sed scelerisque enim porttitor ac. Aenean id luctus quam. Nullam elementum arcu quis elit malesuada dapibus. Maecenas leo nisi, maximus dignissim enim sed, lacinia tempor est. Maecenas eget cursus ligula.</p>
The z-index css property would be a good tool to use also in situations like this, just center the text using margin values.
http://www.w3schools.com/cssref/pr_pos_z-index.asp
There is a z-index property, you should increase it by 1 and that should help you. You can make some methods that will increas/decrease it in case you would like to hide it and then let it show up back again.
More about z-index in here and here.
I can't get my content to go into a wrapper, it just shows on the left side
<div id="middle">
<div class="wrapper">
<div id="image_rose"><img src="assets/rose.jpg"/></div>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci.</p>
<img src="assets/leef.png" />
<p>Text Input:</p>
CSS:
.wrapper{
background-color:#666666;
width:900px;
margin:0px auto;
text-align:left;
}
#middle{
background-color:#666;
width:900px;
float:left;}
You're putting your content and wrapper into #middle, which floats left. wrapper is the same size and middle, so will just site on the left.
You can clear your float as shown below:
clear:both
If the content is showing beyond the div, you might try adding an overflow: hidden; or a different overflow setting to that specific div in your css.
Try this layout for centering your middle content
HTML
<div id="wrapper">
<div id="middle">
</div>
</div>
CSS
#wrapper
{
width:100%;
padding:0px;
margin:0px;
}
#middle
{
margin:0 auto;
width: 600px;
}
I'm working on a webpage with a tabular layout, with three cells: top, bottom-left, bottom-right. The top cell contains a header element and has a height of 105px. The bottom-left cell is a navigation pane. The header and navigation pane are both fixed. The bottom-right cell is the content pane. The bottom two cells are wrapped in a div. I want the bottom wrapper to be essentially the height of the page minus the height of the header element (105px) so that the whole page is covered. I've looked around, but none of the solutions I've found have worked. This is my CSS (I'm using SASS):
div#lower-container {
position:absolute;
width:100%;
height:100%;
div#navigation {
width:20%;
background-color:transparent;
position:fixed;
top:105px;
height:100%;
border-right:1px solid $blue;
};
div#content {
position:absolute;
top:105px;
width:80%;
height:100%;
background-color:white;
margin-left:20%;
overflow-y:scroll;
};
};
And here is my HTML code:
<div id="lower-container">
<div id="navigation">
</div>
<div id="content">
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
</div>
</div>
And finally, a screenshot of what it looks like now: http://i.imgur.com/jsXa5.png
I would prefer to use pure CSS/SASS, and not JavaScript/jQuery. Thanks!
If I understood you right, you want something like this?
CSS:
#wrapper{
height:100%;
width:100%;
#top:{
position: absolute;
height: 135px;
}
#content{
position: relative;
height:100%;
}
}
HTML:
<div id="wrapper">
<div id="top">PICTURE</div>
<div id="content">Lorem Ipsum Dolor Sit Amet Bla Bla Bla</div>
</div>
CSS3 supports the calc operation, so you're probably looking for
height: calc(100% - 105px);
(The spacing around the - is important)
I have been able to sucessfully wrap text in a div with an image to the left but I can't wrap the text in a div with the image floated to the right. I have tried floating p left. I have also tried making changing the display mode of the div with right floated image to inline and inline block. I also tried using text-align left.
Here is the code for the div were the text wraps ok.
#text_area_top
{
margin-top:5%; margin-left: 2%;
height: 150px; width:700px; position:relative;
font-family:Arial, Helvetica, sans-serif; font-size:18px;
}
Here is the code for the div where the text won't wrap.
#text_area_bottom
{
margin-top:5%; margin-left: 2%;
height: 150px; width:700px; position:relative;
font-family:Arial, Helvetica, sans-serif; font-size:18px;
background-color:#00FF00;
text-align:left;
}
#text_area_bottom img { float:right; }
Here is some extra code that would be important to know for solving this problem.
p { display:inline-block; position:absolute; margin:0px; }
If there is any more information you need me to include please let me know and I will post promptly.
Here is the html:
<div class="content">
<div id="text_area_top">
<img src="img.png" id="content_img" />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ornare
urna et ligula lobortis sed aliquam eros eleifend. Aliquam gravida tellus mollis
massa rhoncus egestas.
Aliquam molestie arcu vitae est accumsan rutrum. Cras vitae tellus justo. Quisque pulvinar adipiscing dolor, non consectetur enim vehicula quis.Etiam tortor augue, interdum et congue a, imperdiet sed risus. Cras sagittis vestibulum</p>
</div>
<div id="text_area_bottom">
<img src="img.png" id="content_img2" />
<p>Scelerisque vitae, convallis non nibh. Maecenas euismod lacinia ipsum, non vulputate metus eleifend id. Quisque sagittis posuere massa, sed pretium odio dignissim eu. In sit amet est non lectus semper pellentesque vitae in tellus. Nullam facilisis auctor quam at pretium.
</p>
</div>
</div>
Try that it work on my side.
p { width:500px; display:inline-block; position:relative; margin:0px; }
just add a width for your p tag.
i have this layout and i have these two divs, maincontent and extracontent. there supposed to float beside eachother. but when i have more than one extracontent div it slides down the main content for some reason. can you help me fix it?
i have provided a js fiddle, http://jsfiddle.net/XzRun/
HTML
<div id="container">
<div id="content">
<div class="extracontent">
<h1>Other header</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus quis nunc orci, dignissim sagittis urna.</p>
</div>
<div class="extracontent">
<h1>Other header</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus quis nunc orci, dignissim sagittis urna.</p>
</div>
<div class="maincontent">
<h1>Some header text</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse feugiat aliquam justo, nec faucibus nulla porta eget. Fusce ipsum quam, interdum posuere aliquam non, laoreet sed leo. Maecenas luctus, tellus varius fermentum gravida, libero metus pharetra sem, ac scelerisque erat felis vestibulum diam. Donec vulputate eleifend interdum. Etiam ultrices, ante vitae luctus hendrerit, quam justo tempor tortor, pulvinar euismod quam ligula vel eros. Duis vel tellus mi, congue gravida purus. Nulla facilisi. Fusce ac magna arcu, sed vulputate justo. Quisque nec ante vitae lorem laoreet lobortis. Phasellus euismod urna sed turpis tincidunt vehicula. Aenean consequat rutrum sapien vel tincidunt. Mauris tincidunt pretium nisi nec ultricies. Aenean a sem nunc. Nunc luctus, metus in adipiscing hendrerit, lacus felis mollis dui, quis feugiat leo mi nec dolor.</p>
</div>
</div>
</div>
CSS
#container {
width:1000px;
margin:0 auto;
padding:20px 0;
text-align:left;
}
#content {
margin-left:10px;
float:left; /* lines up the left #content and the right #sidebar div's beside eachother */
width:810px;
}
.maincontent {
float:left;
margin:10px 10px 10px 0; /* double the right side because left has 0 */
padding:0 20px;
width:506px;
color:rgb(50,50,50);
background:rgb(255,255,255);
}
.extracontent {
clear:left;
float:left;
margin:10px 10px 10px 0; /* double the right side because left has 0 */
padding:0 20px;
width:200px;
height:200px;
color:rgb(50,50,50);
background:rgb(255,255,255);
}
The problem is that divs are always floated horizontally, not vertically. What you want to do here is to float the .extracontents vertically, while keeping the horizontal relationship. To do this, wrap all the .extracontent divs in a '.allextras` div, with the following css:
.allextras { clear: left; float: left; width: 220px; }
Or however you want it styled to get the margins the way you want.
Im not particularly sure of what you want to achieve.
If you want to have two extra content panels beside each other, your either going to have to widen or shrink extra and main content.
To do this i recommend that you use some JQuery to determine the amount of .extracontent and then change the width according to that.
The best way would be to put .extracontent inside a container with static width and then do something like:
divide extracontent.width by (extracontent in parent).count.
You could also stretch #content to have a min-width instead of fixing the width to be 1000
As defined in your CSS, your #content has width 810px, your .maincontent has width 506px and your .extracontent has width 200px. If you add an extra .extracontent, you will have total 906px. So it goes beyond 810px and slides down.
Your #content that surrounds the one #maincontent and two #extracontents has a smaller width then all of them. 506 + 200 + 200 + all of the margins > 810px. Give it some more room and your divs won't drop to other levels.