How can I fully stretch two <div>s to be 50% wide? Prepared jsFiddle.
HTML
<div class="container">
<div class="left">left</div>
<div class="right">right</div>
</div>
CSS
div.container {
width: 100%;
}
div.left, div.right {
display:inline;
width:50%;
}
div.container {
width: 100%;
white-space: nowrap;
}
div.left, div.right {
display: inline-block;
width: 50%;
}
Updated jsfiddle
Or:
div.container {
width: 100%;
}
div.left, div.right {
float: left;
width: 50%;
}
Updated jsfiddle
One approach: Use inline-block and box-sizing: border-box (the latter if you have borders)
Demo
CSS:
div {
box-sizing: border-box;
}
div.container{
width: 100%;
position: relative;
border: 1px solid blue;
}
div.left, div.right {
display:inline-block;
width:50%;
border: 1px solid black;
}
HTML:
<div class="container">
<div class="left">left</div><div class="right">right</div>
</div>
Note: the lack of space between the two divs in purposeful. A space between two inline elements is meaningful.
There is multiple ways of doing that. You could apply css like this.
div.left, div.right {
position: relative;
float:left;
width:50%;
}
http://jsfiddle.net/cdydq/14/
Here is another method that may render the required reults.
div.container {
position: relative;
width: 100%;
}
div.left {
position: relative;
width:50%;
}
div.right {
position: absolute;
margin-left:50%;
width:50%;
top:0
}
http://jsfiddle.net/cdydq/18/
Related
I am just a beginner in HTML/CSS
How to stop the floating div from overlapping.
jsfiddle-link
HTML
<body>
<div class="left">
</div>
<div class="right">
</div>
</body>
CSS
* {
margin: 0;
padding: 0;
}
body {
width: 100%;
}
.left {
float: left;
height: 500px;
width: 300px;
background: #fff;
position: absolute;
}
.right {
float: right;
height: 500px;
width: 300px;
background: #000;
}
Use widths in percentages and remove the absolute positions:
Here is the updated CSS:
*{
margin:0;
padding:0;
}
body{
width:100%;
}
.wrapper {
width: 100%;
}
.left{
float:left;
height:500px;
width:50%;
background:#fff;
}
.right{
float:right;
height:500px;
width:50%;
background:#000;
}
I have also wrapped left and right divs in a wrapper div
Check it here: https://jsfiddle.net/2Lk13045/2/
You set your width fixed instead of 100%.
https://jsfiddle.net/2Lk13045/1/]
Changed your
body{width:100%; }
to
body{width:600px; }
I have 2 divs in a container, one in the center and one to the right. I want the width of the right div to be responsive. Currently, only the max-width on the centered one works.
See this jsFiddle.
How do I make the right div responsive too?
HTML:
<div id="container">
<div id="middle">Centered</div>
<div id="right">Make me responsive</div>
</div>
CSS:
#container {
width: 100%;
text-align: center;
position: relative;
}
#middle {
background: #ddd;
margin: 0 auto;
position: relative;
width: 100%;
max-width:300px;
height:300px;
display: inline-block;
vertical-align: top;
}
#right {
background:yellow;
width:100%;
max-width:300px;
display: inline-block;
vertical-align: top;
position: absolute;
}
#media screen and (max-width: 350px) {
#right {
display: none;
}
}
The idea is to use flexbox. And add a pseudo element for left column, in order to make the middle one in the center with your existing markup.
JSFiddle Demo
#container {
display: flex;
}
#container:before, #middle, #right {
border: 1px solid red;
flex: 1 1 0;
}
#container:before {
content:"";
}
#middle {
max-width: 100px;
}
<div id="container">
<div id="middle">Centered</div>
<div id="right">Responsive</div>
</div>
You can accomplish what you want by doing something like this: JSFiddle
Only problem is your middle div has to have a fixed width but using media queries you can forget about that. Keep in mind that calc browser support could be better (although there are polyfills).
#middle {
position: relative;
margin: 0 auto;
height: 300px;
width: 340px;
background: #ddd;
text-align: center;
}
#right {
position: absolute;
top: 0; right: 0;
width: calc(50% - 170px);
background: red;
}
#media screen and (max-width: 340px) {
#middle {
width: auto;
max-width: 340px;
}
#right {
display: none;
}
}
BEFORE EDIT
max-width is not working on elements where position is set to absolute.
What exactly do you want do accomplish with absolute and also, what kind of layout do you want to get in the end?
remove the max-width from right div. also you have to set a percent less than 100% but totally 100% to make sense to responsive divs:
#container {
width: 100%;
text-align: center;
position: relative;
}
#middle {
background: #ddd;
margin: 0 auto;
position: relative;
width: 80%;
max-width: 300px;
height: 300px;
display: inline-block;
vertical-align: top;
}
#right {
background: yellow;
width: 20%;
display: inline-block;
vertical-align: top;
position: absolute;
}
#media screen and (max-width: 350px) {
#right {
display: none;
}
#middle {
width: 100%;
}
}
<div id="container">
<div id="middle">Centered</div>
<div id="right">Make me responsive</div>
</div>
I would like to set the 2-columns divs with the same height than container (without using px of course)
HTML
<body>
<div id="container">
<div id="hdr-lay">
Header
</div>
<div id="left-column">
Grid Layout left
</div>
<div id="right-column">
Grid Layout right
</div>
</div>
</body>
CSS
#hdr-lay {
_background-color: red;
}
#container {
background-color: gray;
height:100%;
width:100%;
}
#left-column {
float: left;
background-color: red;
border: 1px;
width: 70%;
}
#right-column {
float: left;
width: 30%;
background-color: blue;
display: block;
}
http://jsfiddle.net/g3gxv4j2/
Perhaps it would be easier to do itwith no ?
I would like to set the 2-columns divs with the same height than
container
Since your container have height:100%, I assume you want the same for your child div's
Give 100% height to your html and body
html,body{
height:100%
}
You've set height:100% for your container. This will only extend its height to 100% of its content(which themselves are not getting 100% height). Let your left and right columns inherit height from their parent container.
#right-column {
float: left;
width: 30%;
background-color: blue;
display: block;
height:inherit;
}
#left-column {
float: left;
background-color: red;
border: 1px;
width: 70%;
height:inherit;
}
Here's the fiddle
Cheers!
This might be better :
#container {
display:flex;
flex-direction:row;
}
#left-column {
width: 30%;
background-color: blue;
}
#right-column {
background-color: red;
width: 70 %;
}
I'm really stuck on this and would appreciate any direction.
I need to code the following design using CMS and html but I have no idea how to get the center image to overlap the divs on the right and left of the image. I have been reading about relative position and z-indexes but everything that I have tried has failed. Generally when I line up three dives across I will use the float property and it works perfectly but it turns out z-indexes can only be used with positioned elements. If someone could get me started in the right direction I will probably be able to figure it out.
See the design I am trying to code here: https://cdn.shopify.com/s/files/1/0211/8026/files/Example.png?9982
This is the base framework but I don't know where to go from here...
.row-container {
width: 100%;
height: 300px;
margin: auto;
text-align: center;
position: relative;
}
.box1 {
height: 216px;
width: 288px;
float: left ; /* <-- This does not work */
border: 1px solid blue;
}
.image {
height: 250px;
width: 350px;
float: left ; /* <-- This does not work */
border: 1px solid grey;
}
.box2 {
height: 216px;
width: 288px;
float: left; /* <-- This does not work */
border: 1px solid red;
}
<div class="row-container">
<div class="box1"></div>
<div class="image">-- Should I use a div for the image?</div>
<div class="box2"></div>
</div>
Try this it would have worked a bit more better if position:absolute is used but since you wanted float there will be re sizing problems Fiddle
Zoom out to get the effect
.row-container {
width: 100%;
height: 300px;
margin: auto;
text-align: center;
position: relative;
}
.box1 {
position: relative;
z-index: -1;
background: green;
height: 216px;
width: 288px;
float: left;
}
.image {
margin-left: -80px;
background: red;
float: left;
height: 250px;
width: 200px;
}
.image img {
width: 300px;
}
.box2 {
position: relative;
z-index: -1;
float: left;
background: blue;
height: 216px;
width: 288px;
}
<div class="row-container">
<div class="box1"></div>
<div class="image">
<img src="http://placekitten.com/300/301" />
</div>
<div class="box2"></div>
</div>
You can do it without floats using position: (colors added for emphasis)
fiddle
.row-container {
width:900px;
height:300px;
margin:auto;
text-align: center;
border:2px solid black;
background-color:blue;
position:relative;
}
.box1 {
height:216px;
width: 288px;
left:0px;
position:absolute;
z-index:10;
}
.image {
height:250px;
width: 350px;
position:absolute;
top:20px;
left:275px;
z-index:100;
background-color:red;
}
.box2 {
height:216px;
width: 288px;
right:0px;
position:absolute;
z-index:10;
}
div{
background-color:green;
}
You can use z-index on position: relative, so add that to your inner elements and set the z-index.
To create the overlap you can use a negative margin-left on the second and third elements.
I'm trying to set these divs to align like this:
but they end up either overlapping eachother (.title takes full width of container) or underneath eachother. Ideas?
.wrapper{
display: table;
float: left;
width: 1000px;
height: 200px;
}
.pic{
float: left;
width: 100%;
height: 20%;
}
.title{
width: 100%;
height: 20%;
}
.content{
width: 100%;
height: 20%;
}
.footer{
width: 100%;
height: 20%;
}
HTML:
<div class="wrapper">
<div class="pic"><img src="..."></div>
<div class="title"><p>title</p></div>
<div class="content"><p>lorem ipsum</p></div>
<div class="footer"></div>
</div>
JS FIDDLE: http://jsfiddle.net/mmb84836/
As per the Best Practice:
Put Pic in one Box and the other three Boxes on right in one Box and use "float:left or **display:inline-block**for those.
Here is the code for the same:
HTML
<div class="wrapper">
<div class="leftBox">
<div class="pic">pic</div>
</div>
<div class="rightBox">
<div class="title">title</div>
<div class="content">content</div>
<div class="footer">footer</div>
</div>
</div>
CSS
div {
border:1px solid #000;
}
.wrapper {
display: block; /*Default Property - You Can Remove Also*/
width: 1000px;
height: 200px;
}
.leftBox {
float:left;
width :20%;
height:100%
}
.rightBox {
width :79.5%;
float:left;
height:100%
}
.pic {
width: 100%;
height: 100%;
}
.title {
width: 100%;
height: 20%;
}
.content {
width: 100%;
height: 20%;
}
.footer {
width: 100%;
height: 20%;
}
Here is the Working Fiddle: http://jsfiddle.net/7xLyc3q1/
You've got a lot of answers here, but none of them explain what is actually happening here. When using float, there's something important you need to understand: floated elements are lifted out of the box model and have effectively zero width and height as far as other elements are concerned. There is a workaround for this: by specifying overflow:hidden in the parent element, floated elements will no longer "collapse".
Here's an example that demonstrates this. Notice that the title, content, and footer have a width:100%, and they're only filling the space that is remaining for them -- this is probably what you'd expect to happen. Notice also that there was no need to float them to the right... they take the space that's left.
Try adding float: right to .title, .content, and .footer.
Also it may be worth considering using Foundation or Twitter Bootstrap. Both have grid systems so this would guarantee the divs would resize to fit any size screen.
<div class="wrap">
<div class="pic">pic</div>
<div class="other">oth1</div>
<div class="other">oth2</div>
<div class="other">oth3</div>
</div>
.wrap { width:100; height:200px; }
.pic { float:left; width:29%; height:100%; margin-right:1%; background-color:red; }
.other { float:left; width:70%; height:32%; margin-bottom:0.5%; background-color:green; }
and jsfiddle http://jsfiddle.net/t85kz39a/
Here is one way of doing it if you can specify a width for the image. I assumed that the image would be 200px wide in this demo.
Try the following CSS:
.wrapper{
width: 600px;
height: 200px;
padding-left: 200px;
border: 1px dashed gray;
}
.pic{
float: left;
width: 190px;
margin-left: -200px;
border: 1px dashed blue;
}
.pic img {
display: block;
}
.title{
width: auto;
height: 20%;
border: 1px dotted blue;
}
.content{
width: auto;
height: 20%;
border: 1px dotted blue;
}
.footer{
width: auto;
height: 20%;
border: 1px dotted blue;
}
The trick is to open up a space to place the image. Add a 200px wide left padding to
the .wrapper.
The padding will force .title, .content and .footer to align 200px from the edge
of the wrapper.
For .pic, set the width to 200px (or smaller) and set the left margin to -200px to move
it into the padding area.
Finally, set the correct width for .wrapper, 600px. The overall width of .wrapper
will compute to 800px (600px width + 200px left padding - -200px left margin from the
float).
See demo: http://jsfiddle.net/audetwebdesign/mgg1stmc/
The main benefit of this approach is that you don't need to add any other wrapping
elements. (If you use floats, the extra wrappers are necessary.)
There's a much simpler css-only way without changing your HTML structure:
Demo http://jsfiddle.net/bfhng3a9/
All you need:
.wrapper {
overflow:auto;
text-align:center;
}
.pic {
float: left;
width:20%;
}
.title, .content, .footer {
width:80%;
float:right;
clear: right;
}
You can use this code and it is working according to your design.
Live Working Demo
HTML Code:
<div class="wrapper">
<div class="pic"><img src="..."/></div>
<div class="title"><p>Title</p></div>
<div class="content"><p>Content</p></div>
<div class="footer"><p>Footer</p></div>
</div>
CSS Code:
.wrapper{
position: relative;
float: left;
width: 1000px;
height: 200px;
border: 1px solid #000000;
}
.pic{
float: left;
width: 300px;
height: 200px;
background-color: red;
position: relative;
}
.title{
width: 650px;
height: 60px;
background-color: green;
position: relative;
left: 350px;
top:-16px;
}
.content{
width: 650px;
height: 60px;
background-color: blue;
position: relative;
left: 350px;
top: -22px;
}
.footer{
width: 650px;
height: 60px;
background-color: gold;
position: relative;
left: 350px;
top: -28px;
}
Result: