I am having trouble making one div height move with the other/be equal. I need these to be equal as the left sidebar will have more content but I would still like the right div height to move with it as its a sidebar.
<div id="maincontainer">
<div class="contentcontainer">
<div class="postcontentcon">Nam eu auctor enim, id tincidunt dolor. Sed et lacinia sem. Donec pretium quam eget nunc vestibulum, vel sagittis nibh bibendum. Fusce eleifend sagittis ultrices. Nullam lobortis ultricies justo, nec tempus metus sollicitudin at. Proin sit amet turpis a orci ullamcorper pulvinar id vitae erat. Fusce sodales iaculis nulla ac faucibus. Vivamus blandit placerat nunc, nec dictum velit tincidunt in. Pellentesque elementum odio metus, eget fringilla nisi imperdiet quis. Etiam facilisis magna pellentesque lorem luctus condimentum. Nulla blandit ac ligula nec aliquam. Cras massa felis, condimentum condimentum ligula in, pharetra fermentum felis. Proin sed lorem interdum, lobortis lectus non, porta tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
<div class="postsidebarcon">Hello</div>
</div>
CSS
body { background-color:#606061; }
.contentcontainer {
margin:0 auto;
position:relative;
width: 1017px;
height:auto;
}
.postcontentcon {
margin:0 auto;
position:relative;
width: 694px;
background-color:#525253;
float:left;
}
.postsidebarcon {
margin:0 auto;
position:relative;
width: 323px;
height:inherit;
background-color:#484848;
float:left;
}
You have a few ways to do his :
display:flex and sizing your containers, default will draw child
side by side demo
display:table on parent + width and display:table-cell; on child + width : demo
clearing floats . float first element, set margin to second, add a pseudo with clear:both (or left/right) demo
faux-column technique, oldish but solid , fine here since parent container has a fixed width The idea is to draw the column onto background of parent : demo (here i used a gradient for the demo, but usally it is an image. You can use multiple background nowdays.
there is other tricky ways with: floatting & hudge heights , negative margin ,overflow. some will even use absolute positionning but you should stay away from using these.
Related
Ok, CSS gurus. Here's an easy one for you. I want to have a sidebar to the left of my main content area. I'd like the sidebar to take up 30% of the screen and the content to take up 70%. However, I'd like the sidebar area to take up 100% of the available height. I have
<div id="main">
<div id="side">
<%= render "layouts/sidebar" %>
</div>
<div id="contentArea"><%= yield %></div>
</div>
I thought setting the parent DIV to have "display:flex;" would make everything right ...
#main {
display: flex;
width: 100%;
background-color: green;
}
#side {
background-color: #e0e0e0;
width: 30%;
display: inline-block;
float: left;
height: 100%;
}
#contentArea {
text-align: center;
width: 70%;
display: inline-block;
}
but right now, the height of my sidebar is only equal to the content that's in it. How do I make it 100% of everything?
In your structure ‘main’ is parent div, that’s mean if you set ‘100% of everything’ to child div ‘side’ and this div not position absolute or fixed, ‘main’ get 100% too.
So, you can use relative lengths, like height: 100vh.
jsfiddle
But you can set to side div position fixed: it will help when you get scroll in contentArea, but side div all time will in left side with height 100vh.
jsfiddle
Tip: if you use flex, you can manipulate without float (e.g. justify-content
). Check it: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
The problem is that you specified a height of 100% on #side. Ironically, this actually prevents the column from taking up the full vertical space, as it caps to at the height of the container. Because #main doesn't have a specified height, setting height: 100% on #side will constrain it to the height of the content (text) within.
Simply removing this causes the column to expand to take up the full vertical space:
#main {
display: flex;
width: 100%;
background-color: green;
}
#side {
background-color: #e0e0e0;
width: 30%;
display: inline-block;
float: left;
/*height: 100%;*/
}
#contentArea {
text-align: center;
width: 70%;
display: inline-block;
}
<div id="main">
<div id="side">
Side
</div>
<div id="contentArea">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ut interdum quam. Integer nec tincidunt erat, in scelerisque turpis. Pellentesque interdum turpis eu ante gravida, a auctor lacus pulvinar. Maecenas elementum massa ac felis gravida lobortis
vitae eget nisi. Donec erat turpis, condimentum et ipsum in, tincidunt fringilla quam. Nam est dui, porttitor eget nisl sit amet, mollis varius dui. Suspendisse dui mauris, tincidunt vitae blandit ac, consectetur sed ex. Sed bibendum felis ex, id
euismod odio euismod ac. Praesent viverra arcu quis arcu condimentum, eget varius elit suscipit. Donec tempus, justo vel iaculis vehicula, risus magna varius ex, vitae mattis elit turpis ac magna. Fusce porta tempus erat vel ultricies. Suspendisse
vel erat blandit, semper dui sed, consequat urna. Pellentesque ultrices pellentesque feugiat. Donec sit amet turpis in orci accumsan blandit. In tincidunt erat sed tristique sagittis. Duis ultrices lacus quis vestibulum venenatis. Maecenas et risus
quam. Quisque semper purus id mauris gravida dictum. Cras tellus augue, sollicitudin ac maximus eget, porta elementum elit. Fusce vulputate consectetur dapibus. Praesent semper augue lacus, vel laoreet tellus ultricies fermentum. Phasellus vestibulum
fringilla purus ut malesuada.
</div>
</div>
Hope this helps! :)
Use: #side{height: 100vh;} (vh = viewport height), and remove display flex so you can have unequal height for each div.
Link to jsfiddle https://jsfiddle.net/gcoh62o6/5/
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'm working on a template for WordPress and need to render images to the left and to the right side of the main content div.
I have a wrapping div of 100% width, so the images don't overflow the screen, then I have given the images position: absolute (relative to the content div), and a negative value (the width of the image) on the right/left parameters.
This works fine, and renders the images nicely to the left and right of the main content. But the problem is, these images need to change every once in a while, and the width of the images varies, so the left and right offsets are not correct anymore.
How can I render the images outside of the div, without knowing the width? I've tried Left/Right:-100%;, but that doesnt work.
The images are purely decorational, and dont have to be (fully) visible when the screen is too small.
Thanks for any help!
If you can't specify the width and want to display the image as is (not scaling it), you can float the images to the right and left and use overflow:hidden on the content
.left {
float: left;
margin-right: 20px;}
.content {
overflow:hidden;}
.right {
float: right;
margin-left: 20px;}
However, you will need to have the following struture in your html for the layout to render correcty:
.wrap > img + img + .content
http://jsfiddle.net/h6u65hp8/1/
How about something like this? http://jsfiddle.net/usL5vcqg/
<div id="wrap">
<div id="leftImage">
<img src="https://www.google.com.au/images/srpr/logo11w.png"/>
</div>
<div id="content">
text goes here
</div>
<div id="rightImage">
<img src="https://www.google.com.au/images/srpr/logo11w.png"/>
</div>
</div>
* {
margin:0;
padding:0;
}
#wrap {
width:100%;
}
#leftImage {
width:20%;
float:left;
}
#rightImage {
width:20%;
float:left;
}
#content {
width:60%;
float:left;
}
img {
width:100%;
}
The images will scale depending on the size of the screen and they will always sit on either side of the content.
I actually came up with something myself. The content div has a static width, so what I did was switch the left and right parameters around, and set it to the width of the content div (plus some padding).
<div class='prevent-overflow'>
<div class='content'>
<img src='http://placehold.it/200X200' class='left-side-image' />
<img src='http://placehold.it/200X200' class='right-side-image' />
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec at libero nec ex vestibulum luctus ut eget odio. Nunc mollis, nulla eget cursus porttitor, neque sem rhoncus est, vel consequat leo lacus at nisl. Nulla ac sem eget lorem malesuada malesuada. Fusce in erat tempus, elementum sem id, dapibus sapien. Vivamus vestibulum enim nulla, id porttitor odio condimentum ac. Pellentesque lacinia mollis elit tristique luctus. Vivamus luctus ultricies ullamcorper. Vivamus eros orci, luctus et pellentesque commodo, egestas et velit. Duis ante velit, feugiat sed gravida ac, tempus sed odio. Praesent tincidunt risus id ex placerat rhoncus. Maecenas sit amet pharetra neque. Aenean dapibus a velit quis ultricies. Quisque aliquam erat nec est rutrum, nec ornare urna ultrices. Quisque accumsan purus non ex sagittis, in facilisis massa facilisis. Vivamus fermentum libero dictum neque laoreet, sit amet pretium dui luctus.
</div>
</div>
.prevent-overflow {
overflow:hidden;
width:100%;
}
.left-side-image{
position:absolute;
right:320px;
}
.right-side-image{
position:absolute;
left:320px;
}
.content {
width:300px;
margin:0 auto;
position:relative;
}
In my initial code, I had a negative Left/Right (depending on the size of the image) in the .left-side-image and .right-side-image classess.
http://jsfiddle.net/6wp1h52c/
I've been toying around a bit with positioning (relative and absolute) and i ran into a weird problem.
HTML:
<div class="one">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam tincidunt sem ac lacus varius ullamcorper. Sed sed tincidunt lorem. Integer volutpat mauris eu elit condimentum vehicula. Vestibulum vitae urna id risus ornare porta. Praesent quis tortor nunc. Donec ut aliquam orci. Mauris cursus quam mauris. Aliquam iaculis, augue malesuada egestas blandit, erat lectus vestibulum magna, sed pharetra arcu orci nec ligula. Proin non sem dui. Integer viverra viverra est sit amet fermentum. Pellentesque egestas tristique eros vel interdum. Nam vel neque odio, et mollis nulla. Vestibulum fermentum augue vel justo ullamcorper molestie. Sed eget enim urna, a elementum mi. Aenean ornare viverra dictum.
</p>
<div class="inner"></div>
</div>
CSS:
.one{
position: relative;
}
.one p{
margin-top: 60px;
}
.inner{
width: 100%;
height: 50px;
background:red;
position:absolute;
top:0;
right:0;
}
As you can see here, I apply margin to the <p> tag, but it pushes the entire wrapping div and thus affecting the positioned element as well.
Is that the way it should behave or am i missing something?
Try overflow: auto; on your .one element.
Overflow:auto works for this
DEMO
Reason: Here is explanation for this http://www.brunildo.org/test/OverflowR.html
Apply padding-top to the containing div instead of margin-top to the element.
Absolute position is applied to the parent relative. If you want the absolute positioned div to be at the top of the page, don't use relative at one or one p.
Is this what you were looking for?
http://jsfiddle.net/DYBpg/
Div with class="one" have this css rule
position:relative
that pushes all its content down.
Remember that once you write position:absolute, this absolute will refer to its "container".
If you remove the relative positioning from one and one p you'll obtain wat you want
DEMO
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.