I have an issue regarding my html/css composition
I have a fixed menu on the right with a known width : 175px. What i want is to "fill" the space on the left of this div with an other div.
I hope you will understand what i am saying, anyway, thanks in advance !
You can do something like this (it will work with older browsers) :
jsFiddle
HTML:
<div class="left">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vitae urna eget purus pharetra sodales. Integer in justo quis risus pellentesque fermentum. Donec sit amet pharetra arcu. Fusce imperdiet tempor eleifend.
</div>
<div class="right">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vitae urna eget purus pharetra sodales. Integer in justo quis risus pellentesque fermentum. Donec sit amet pharetra arcu. Fusce imperdiet tempor eleifend.
</div>
CSS:
.left { float:left; height:300px; background:blue; margin-right:175px; }
.right { width:175px; height:300px; background:red; position:fixed; right:0; }
DEMO HERE
CSS
#fixed {
position:fixed;
right:0;
float: right;
width: 100px;
background: rgba(255,0,0,0.7);
height:400px;
text-align: center;
}
#relative {
position:relative;
margin-right: 100px;
background: rgba(0,0,255,0.7);
height:400px;
width:100%;
display: inline-block;
float:right;
text-align: center;
}
HTML
<div id="fixed" >
I am fixed.
</div>
<div id="relative">
I am relative, fluid, width 100%
</div>
Depending on the browsers that you need to support (IE9 >) you can use calc() in your CSS for the "fill":
.fill {
width: calc(100% - 175px);
}
calc() is still labelled as "experimental technology" so be sure to read up on it before using - https://developer.mozilla.org/en-US/docs/Web/CSS/calc
More info regarding calc() support - http://caniuse.com/#search=calc
CSS
.LeftDiv {
width:80%;
display:inline-block;*display:inline;zoom:1; /* The additional code is IE7-fix */
height:500px;
background:#aaa;
}
.rightDiv {
width:175px;
height:500px;
display:inline-block;*display:inline;zoom:1;
background:green;
}
HTML
<leftDiv>a</div><rightDiv>b</div>
most simple version of your request.
Related
I am struggling a bit to get this to work.
If you look at the following JSFiddle:
http://jsfiddle.net/JUDXq/
Is there a way to make the image block sit nicely next to the red block without it moving underneath the red block AND still have other images further down to be 100% width?
The image is on purpose as wide as the parent element. If an image is bigger than its parent, we can use "max-width:100% " to make it resize. But if there is a float inside the parent taking space, is there a way to do this?
<div class="parent">
<div class="left">
</div>
<p>
Lorem ipsum dolor sit amet, non ut, hymenaeos urna mi odio, non ac libero, turpis curabitur ante ultricies proin egestas convallis. In bibendum mauris quis placeat. Fusce interdum id faucibus dictum id adipiscing, non et elit, vel hendrerit libero, nulla donec ornare lacus et lacus lectus. In tristique, mauris mauris adipiscing neque, donec libero nulla sem lacus, nibh arcu nu. <strong> I would like the image to go right below this text.</strong>
</p>
<div class="one">
<img src="http://placekitten.com/500/200">
</div>
</div>
.parent { width: 500px; height:1000px; }
.left {float:left; width:100px; height:200px; background:red; display:block; }
.one { background:blue; }
Image hosted by Placekitten and taken by: Pieter Lanser
Thanks guys
Is this what you're looking for? http://jsfiddle.net/LQxVE/1/
.parent { width: 500px; height:1000px; }
.left {float:left; width:100px; height:200px; background:red; display:block; }
.one { background:blue; }
img {
float: right;
width: 400px;
}
if I'm understanding your comment, this might be more suited: http://jsfiddle.net/LQxVE/2/
.one {
background:blue;
width: 80%;
float: right;
}
img {
max-width: 100%;
}
Im working on a website right now but i have some problems with putting a image on top of 2 divs, and there is a other problem the bottom div is the footer, wich i want to keep stick to the bottom ofcourse (this part works but the image on top of the divs not)
Here is a image to show you my idea better :
I'd like to know a few ideas of how i can implement this, if you need to see my code ask me.
For the people who commented already under my post,
first of all thank you for your time but sadly it didnt work (so far i keep trying your suggestions)
but to help you a bit more to understand what i try to do, i give you a bit of my code.
<html>
<head>
<style type="text/css">
/* general */
body { background: #fdfdfd; font: 12px Verdana, Geneva, sans-serif; color:#444; margin: 0 0 300px; /* bottom = footer height */}
html { position: relative; min-height: 100%;}
.fix_width { width: 940px; margin: 0 auto; }
.fix_width:after, .left_foot_cont ul li:after { content: " " ; display:block; height:0; clear:both; visibility:hidden; }
#header { background:#6FF; height:100px; z-index: 3; position: relative; border-top: color: #555555 thick; border-width:5px; }
#container { position:relative; top:0px; margin-top:100px; overflow: auto;}
.cont {width:250px; padding-left:20px; margin-left:10px; display:inline-block; float:left; }
#footer { background: #A9CF38; position: absolute;
left: 0;
bottom: 0;
height: 200px;
width: 100%;
overflow: auto;}
img {width:940px; }
</style>
</head>
<body>
<div id="header">
<div class="fix_width">
<h2>
Just the header nothing important
</h2>
</div>
</div>
<div id = "container">
<div class="fix_width">
<div class="cont">
<h2>
Lorem ipsum
</h2>
<p class="last">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui.
</p> <!-- End p.last -->
</div><!-- End .cont -->
</div> <!-- End .fix_width -->
</div><!-- End .container -->
<!-- Where should i put the image ????? --->
<img src="http://www.mormonshare.com/sites/default/files/handouts/cg_banner-blank.gif"> </img>
<div id = "footer">
<div class="fix_width">
<div class="footer_con_left">
<h2>
Lorem ipsum
<br /><br />
</h2>
<h1>
dolor sit amet
<br />
dolor sit amet
<br />
dolor sit amet
<br />
dolor sit amet
</h1>
</div> <!-- End. footer_con_left -->
</div><!-- Einde class fix_width -->
</div> <!-- Einde class footer -->
</body>
</html>
As you can see the image in the code, i want this image to be placed 50% on the white space and 50% on the green space (so in the code between the container div and between the footer div, or maybe better to say on top of these divs)
Thanks for helping!
You should place an image in DIV1, set position:relative to DIV1, position:absolute to IMAGE and set bottom:-50% to IMAGE or bottom:0px;margin-bottom:-50%;
Wrap Image in a div:
targethoweveryouwish {
position:absolute;
top:50%;
left:50%;
margin-top:-100px;
margin-left:-300px;
z-index:10;
}
Ok, heres whats going on in the code above. the 50% attributes are moving the div to the center of the page, but it is moving the top left corner of the div to the center, so you'll need to subtract half the height and width of the div to make it center properly, make those adjustments to the margin-top and margin-left properties. The z-index is basically like a 2D way to add layers to your page. Everything is on layer 0 by default, so if you want to overlap things, just put them on a higher or lower z-index. You can use negative values too.
I think you should check this code I've made on this link
The code on the above link will center your image between your divs
Ignore this one .
<html>
<head>
<style type="text/css">
#container{
width:100%;
height:100%;
position:absolute;
background:black;
margin:0px;
padding:0px;
}
#test1{
width:100%;
height:35%;
position:relative;
background:blue;
margin:0px;
padding:0px;
}
#test2{
width:100%;
height:25%;
position:relative;
background:white;
margin:0px;
padding:0px;
}
#test3{
width:100%;
height:40%;
position:absolute;
background:red;
margin:0px;
padding:0px;
}
.content{
width:200px;
height:200px;
background:white;
float:left;
margin:10px 0px 10px 50px;
left:200px;
position:relative;
}
</style>
</head>
<body>
<div id="container">
<div id="test1"></div>
<div id="test2"></div>
<div id="test3">
<div class="content"></div>
<div class="content"></div>
<div class="content"></div>
</div>
</div>
</body>
</html>
I'm trying to make a responsive web layout. On the front page there is a div, with two divs in it. One for the caption and one for the image. The caption should stay next to the image at all times, but the image and caption should scale for smaller screens.
Here is my html;
<div class="content">
<div class="caption">
<h1>Blablabla</h1>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac ipsum quam, semper volutpat massa. Cras mattis malesuada sagittis. Cras luctus erat quis orci condimentum quis vulputate lectus venenatis. Proin lorem lorem, vehicula in porta id, facilisis id massa. Phasellus venenatis eros et diam dictum faucibus. Donec at rutrum orci. Vivamus quam sapien, mollis sed aliquet blandit, viverra nec enim. In sapien lectus, fringilla pretium sollicitudin eu, eleifend id mi. Phasellus ullamcorper massa vitae mauris</p>
</div>
<div class="image">
<img src="pics02.jpg">
</div>
</div>
And this is my css;
.content {
margin: 0px auto;
width:60%;
background-color:black;
margin-top:4em;
display:block;
}
.caption {
width:30%;
background-color:white;
height: auto;
display:inline;
margin:0px;
color:green;
float:left;
padding:6px;
display:block;
}
.image {
display:inline;
margin:0px;
float:right;
display:block;
}
.image img {
max-width:100% !important;
max-height:100% !important;
display:block;
}
In another topic here on stack I found that I should set the img tag with a max width and height and set the display to block everywhere.
Unfortunately that doesn't work when I'm scaling, the image gets smaller when you scale but it slides underneath the caption.
just add this to your image css class:
.image {
display:inline;
margin:0px;
float:right;
display:block;
width: 60%;
}
Hope this is what you want.
Otherwise, if you can update this example with real picture etc, we can help so much more: http://jsfiddle.net/BJ8gK/30/
Live Demo
Why are you used to multiple value
.caption {
width:30%;
background-color:white;
height: auto;
display:inline; // used to any one value
margin:0px;
color:green;
float:left; // used to any one value
padding:6px;
display:block; // used to any one value
}
Used to one property in your class .caption
do't used to multiple display value in a single class
I think You want to this Live Demo
Given this code:
#wrapper {
border:2px solid red;
padding:10px;
width:310px; height:310px;
-webkit-column-width:150px; -webkit-column-gap:10px;
-moz-column-width:150px; -moz-column-gap:10px;
column-width:150px; column-gap:10px;
}
#wrapper > div {
width:150px;
background:#ccc;
margin-bottom:10px;
white-space:no-break;
}
<div id="wrapper">
<div>FIRST BOX: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi porttitor imperdiet dolor sit amet placerat. Phasellus vestibulum enim sed dui blandit nec dignissim justo sollicitudin. Phasellus vestibulum enim sed dui blandit nec dignissim justo sollicitudin.</div>
<div>SECOND BOX: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi porttitor imperdiet dolor sit amet placerat.</div>
<div>THIRD BOX: In at libero ipsum, vel cursus ante. Phasellus ac odio in tortor commodo venenati
I would like to arrange these 3 boxes into 2 columns using the CSS multi-column layout.
JSFiddle Demo
As you can see from my demo, it works. However, I'm concerned with the second box being fragmented into both columns. I would like to prevent this element fragmentation if possible. Is there any way to tell the browser not to fragment my boxes into multiple columns?
(Note that both the second and third box could easily fit into the second column, which is the arrangement I'd like to achieve.)
Some experimentation led me to:
-webkit-column-break-inside: avoid;
http://jsfiddle.net/7TXGS/
However, it doesn't work in Chrome Stable/Beta. It works in Chrome Canary (and Dev):
Probably using -webkit-column-break-after: always; with the FIRST BOX is appropriate.
<div id="wrapper">
<div> FIRST BOX: ... </div>
<div> SECOND BOX: ... </div>
<div> THIRD BOX: ... </div>
</div>
And this CSS code:
#wrapper {
border:2px solid red;
padding:10px;
width:310px;
//height:310px;
-webkit-column-width:150px; -webkit-column-gap:10px;
-moz-column-width:150px; -moz-column-gap:10px;
column-width:150px; column-gap:10px;
}
#wrapper > div {
width:150px;
background:#ccc;
margin-bottom:10px;
}
#wrapper > div:first-child {
-webkit-column-break-after: always;
}
I'm using this layout to create a 2 column fluid web page.
What I can't seem to do is make it so that both the columns in the layout have a height of 100% therefore pushing the footer to the bottom of the page!
Whats the best way to achieve this effect?
Thanks in advance!
Last time I read about this the best answer was display: table; for the main container and display: table-cell; for each column. This will make the column the height that you specify.
#wrap {
background: orange;
display: table;
height: 88%;
width: 550px;
padding: 11px;
}
#col1 {
display:table-cell;
background: #808080;
width: 222px;
border: 1px solid #FFF;
padding: 12px;
}
#col2 {
display:table-cell;
background: #808080;
width: 111px;
border: 1px solid #FFF;
padding: 12px;
}
<!-- this container will determine the height of both columns -->
<div id="wrap">
<div id="col1">
<p>Lorem ipsum something or other.</p>
</div>
<div id="col2">
<p>More Lorem than ipsum.</p>
</div>
</div>
<!-- end container -->
hopefully this is what you're looking for:
http://matthewjamestaylor.com/blog/perfect-2-column-right-menu.htm
Try a different layout, why waste your time trying to hack a cross-browser solution?
This seems to be what you need, but I'm sure you can find others: http://www.savio.no/examples/three-column-layout-6.asp
I do the following in my personal site's CSS file:
#footer
{width: 100%;
bottom: 0px;
padding-top: .5em;
padding-bottom: .5em;
background-color: #ffffff;
border-top: 1px #000000 solid;
text-align: center;
margin-top: .25em;
}
Also, I have little in the way of nested div tags. I prefer to have the elements float around each other.
have 2 div tags, each as a column floating next to each other, and another div tag to clear the floats, then lastly another div to be the footer:
<div id="col1"></div>
<div id="col2"></div>
<div clear="c"></div>
<div id="footer"></div>
<style type="text/css"><!--
#col1{
float:left;
width:80%;
}
#col2{
float:right;
width:20%;
}
.c{
clear:both;
}
#footer{}
--></style>
With this, it's also easier to make it a 3 column.
<div id="col1"></div>
<div id="col2"></div>
<div id="col3"></div>
<div clear="c"></div>
<div id="footer"></div>
<style type="text/css"><!--
#col1{
float:left;
width:200px;
}
#col2{
float:right;
width:300px;
}
#col3{
width:400px;
margin-left:200px;
margin-right:300px;
}
.c{
clear:both;
}
#footer{}
--></style>
Here's another way...
<div id="container">
<div id="col1"></div>
<div id="col2"></div>
</div>
<div id="footer"></div>
<style type="text/css"><!--
body { height: 100% }
#container { height: 100% }
#col1 { height:100%; float:left; width: 70% }
#col2 { height:100%; float:right; width: 30% }
#footer { height: 50px; clear: both }
--></style>
Just made jsfiddle by Matthew James Taylor post. For me it was very useful. I think this is not a problem to remade for two column.
<div id="container3">
<div id="container2">
<div id="container1">
<div id="col1"><p>Column 1</p>
<p>Nunc egestas, vut mus hac diam lacus lacus nisi odio,
turpis dictumst mattis! Turpis ac ut nec nec et augue, in nec turpis
hac quis risus vel risus pid ridiculus purus urna ultrices ac turpis. In,
magna odio mattis! Ultricies? Odio nec odio enim porta urna phasellus
proin in lacus! Dignissim eros, ac duis porttitor dapibus et vel sed est?
Nec placerat egestas, nunc rhoncus scelerisque sit sit, magna elementum
eu ac, montes dolor ultrices eros velit! Urna dignissim. Enim, aliquam ut
porta etiam amet dolor in natoque? Integer nunc? Magnis, auctor sit nunc
in nec, dictumst
pulvinar proin! In nisi pulvinar penatibus lorem nec, tempor porta
ultricies, et monte.a asdfjasdjfklasdfasdfljsdfkj</p>
</div>
<div id="col2">
<p>Column 2 </p>
<p>Nunc egestas, vut mus hac diam lacus lacus nisi odio,
turpis dictumst mattis! Turpis ac ut nec nec et augue, in nec turpis
hac quis risus vel risus pid ridiculus purus urna ultrices ac turpis. In,
magna odio mattis! Ultricies? Odio nec odio enim porta urna phasellus
proin in lacus! Dignissim eros, ac duis porttitor dapibus et vel sed est?
Nec placerat egestas, nunc rhoncus scelerisque sit sit, magna elementum
eu ac, montes dolor ultrices eros velit! Urna dignissim. Enim, aliquam ut
porta etiam amet dolor in natoque? Integer nunc? Magnis, auctor sit nunc
</div>
<div id="col3">Column 3</div>
</div>
</div>
#container3 {
float:left;
width:100%;
background:green;
overflow:hidden;
position:relative;
}
#container2 {
float:left;
width:100%;
background:yellow;
position:relative;
right:30%;
}
#container1 {
float:left;
width:100%;
background:red;
position:relative;
right:40%;
}
#col1 {
float:left;
width:26%;
position:relative;
left:72%;
overflow:hidden;
}
#col2 {
float:left;
width:36%;
position:relative;
left:76%;
overflow:hidden;
}
#col3 {
float:left;
width:26%;
position:relative;
left:80%;
overflow:hidden;
}
Try : overflow:hidden; on the wrap .
Hope That Helps