JSFiddle.
<div class="content clearfix">
<div class="left">img Left</div>
<div class="center">Text Center</div>
<div class="right">img Right</div>
</div>
.content {
width: 100%;
height: 80px;
border:1px solid #333;
}
.center {
width: 400px;
margin:0 auto;
text-align: center;
}
.left {
float: left;
}
.right {
float: right;
}
I used float to layout the page. the left and the center element perform well. But the img Right was broken. I can't find the reason and what's more I used line-hegiht, the collapse is worse. Thanks for your advantage.
Your .center element is not floated and is centered. If you inspect it, you see its horizontal margins going on left and right (margin : 0 auto;).
For the .left element, it's ok, it comes before the .center element and it is out of the float, so the .center element just ignore it.
But the .right element comes after, and it has to consider the previous HTML element (here : .center). That's why .right element is going under .center element.
So, some solutions :
you can use absolute positioning for the .right element : position: absolute; top: 0; right: 0; (there : http://jsfiddle.net/pg7v4js3/2/ )
other solutions depend on what is the real layout you try to achieve
This is a new fiddle: Fiddle
.clearfix:after{
}
.content{
width: 100%;
height: 80px;
border:1px solid #333;
}
.center{width: 80%; float: left; text-align: center;}
.left{float: left; width:10%;}
.right{float: right; width:10%;}
Related
My footer and its content do not re-position proportional to each other when I reduce the height of the footer.
CSS code:
#footer {
clear: right;
background: #d1dceb;
text-align: right;
padding: 20px;
width: 70%;
float: right;
height: 5px;
}
#footer p.left {
float: left;
text-align: left;
margin-left: 5px;
}
#footer p.right {
float: right;
text-align: right;
margin-right: 5px;
}
And this is what I am getting:
Anything I should do to resolve this?
Remove height and add overflow: hidden:
#footer
{
clear: right;
background: #d1dceb;
text-align: right;
padding: 20px;
width: 70%;
overflow: hidden;
}
<div style="clear:both;"></div>
just before footer div ends and also try removing height from footer
Well, you're not adding any context and any HTML markup. But this is important:
#footer {
clear: right; /* why are you doing this? **/
background: #d1dceb;
text-align: right;
padding: 20px;
width: 70%;
float: right; /* why are you doing this? **/
height: 5px;
}
take a look at those commented lines, which quite probably you don't need at all.
Now, into your issue, you can use two options:
1) clear floats by using the "clearfix" method: simply add an empty div that clears the floats of preceding elements, like this:
<div class="clearfix"></div>
and then in CSS:
.clearfix{clear:both; float:none;}
Obviously you can use this as many times as you want since you're using re-usable classes.
The option 2 is as follows:
#footer p.right:after {content:'';clear:both; float:none; }
What we do here is to add some "empty" content, yet we assign it a "clear:both" property to clear everything, more or less as if we have added that div in option 1
Of course option 1 is way better, but well, there you go
You're using float to position elements, which means that the height of the floated elements are set to 0, just like if you're using positioning: absolute. DON'T use floats! Use flex.
#footer {
background: #d1dceb;
padding: 20px;
width: 70%;
display: flex;
margin: 0 auto; /* center element */
}
#footer p {
flex: 1 1 auto; /* fill up the entire available space */
}
#footer p.right {
text-align: right;
}
<div id="footer">
<p>Left footer element</p>
<p class="right">Right footer element</p>
</div>
I'm trying to put two divs without a linebreak between them.
this is the html:
<div id="header">
<div id="logo"></div>
<div id="left">
<div id="slideshow"></div>
</div>
</div>
and this is the CSS:
#header {
background-color: #13768a;
width: 962px;
height: 207px;
margin-right: auto;
margin-left: auto;
clear: both;
}
#logo {
background-image:url('logo.png');
height: 207px;
width: 250px;
margin-right: 0px;
padding: 0px;
}
#left {
width:712px;
height: 207px;
}
#slideshow {
background-color: #137387;
width: 686px;
height: 144px;
margin-right: auto;
margin-left: auto;
}
the problem is that I want it to look like this:
How I want it to look like
But it looks like this:
How it looks like
This is controlled by the display style property. Normally, div elements use display: block. You can use display: inline or display: inline-block instead if you want them on the same horizontal line.
Example using inline-block (live copy | source):
CSS:
.ib {
display: inline-block;
border: 1px solid #ccc;
}
HTML:
<div class="ib">Div #1</div>
<div class="ib">Div #2</div>
Introduce a float CSS property. Change CSS as below, for #logo and #left.
#logo {
background-image:url('logo.png');
height: 207px;
width: 250px;
margin-right: 0px;
padding: 0px;
float:right;
}
#left {
width:712px;
height: 207px;
float:left;
}
From the MDN Documentation,
The float CSS property specifies that an element should be taken from
the normal flow and placed along the left or right side of its
container, where text and inline elements will wrap around it.
Div elements normally use display:block which forces a line break before and after the element.If you want to remove the line breaks , you can use display:inline which will display elements horizontally.Make the div's display property to display:inline or display:inline-block you want to appear horizontally .
Try this way:
#logo {
background-image:url('logo.png');
height: 207px;
width: 250px;
margin-right: 0px;
padding: 0px;
float:right;}
#left {
position:relative;
width:712px;
height: 207px;
}
#slideshow {
position:absolute;
top:20px;
left:20px;
background-color: #137387;
width: 686px;
height: 144px;
margin-right: auto;
margin-left: auto;
}
Basically I put a float:right; on the logo to position it right, then added position:relative to the #left div and position:absolute to the #slideshow div. This way you can adjust the top and left attributes to position the slideshow anywhere you want it.
display:inline is the css style that you need to use.
I've got two div containers.
Whilst one needs to be a specific width, I need to adjust it, so that, the other div takes up the rest of the space. Is there any way I can do this?
.left {
float: left;
width: 83%;
display: table-cell;
vertical-align: middle;
min-height: 50px;
margin-right: 10px;
overflow: auto;
}
.right {
float: right;
width: 16%;
text-align: right;
display: table-cell;
vertical-align: middle;
min-height: 50px;
height: 100%;
overflow: auto;
}
<div class="left"></div>
<div class="right"></div> <!-- needs to be 250px -->
See: http://jsfiddle.net/SpSjL/ (adjust the browser's width)
HTML:
<div class="right"></div>
<div class="left"></div>
CSS:
.left {
overflow: hidden;
min-height: 50px;
border: 2px dashed #f0f;
}
.right {
float: right;
width: 250px;
min-height: 50px;
margin-left: 10px;
border: 2px dashed #00f;
}
You can also do it with display: table, which is usually a better approach: How can I put an input element on the same line as its label?
It's 2017 and the best way to do it is by using flexbox, which is IE10+ compatible.
.box {
display: flex;
}
.left {
flex: 1; /* grow */
border: 1px dashed #f0f;
}
.right {
flex: 0 0 250px; /* do not grow, do not shrink, start at 250px */
border: 1px dashed #00f;
}
<div class="box">
<div class="left">Left</div>
<div class="right">Right 250px</div>
</div>
You can use calc() Function of CSS.
Demo: http://jsfiddle.net/A8zLY/543/
<div class="left"></div>
<div class="right"></div>
.left {
height:200px;
width:calc(100% - 200px);
background:blue;
float:left;
}
.right {
width:200px;
height:200px;
background:red;
float:right;
}
Hope this will help you!!
If you can flip the order in the source code, you can do it like this:
HTML:
<div class="right"></div> // needs to be 250px
<div class="left"></div>
CSS:
.right {
width: 250px;
float: right;
}
An example: http://jsfiddle.net/blineberry/VHcPT/
Add a container and you can do it with your current source code order and absolute positioning:
HTML:
<div id="container">
<div class="left"></div>
<div class="right"></div>
</div>
CSS:
#container {
/* set a width %, ems, px, whatever */
position: relative;
}
.left {
position: absolute;
top: 0;
left: 0;
right: 250px;
}
.right {
position: absolute;
background: red;
width: 250px;
top: 0;
right: 0;
}
Here, the .left div gets an implicitly set width from the top, left, and right styles that allows it to fill the remaining space in #container.
Example: http://jsfiddle.net/blineberry/VHcPT/3/
If you can wrap them in a container <div> you could use positioning to make the left <div> anchored at left:0;right:250px, see this demo. I'll say now that this will not work in IE6 as only one corner of a <div> can be absolutely positioned on a page (see here for full explanation).
1- Have a wrapper div, set the padding and margin as you like
2- Make the left side div the width you need and make it float left
3- Set the right side div margin equal to the left side width
.left
{
***width:300px;***
float: left;
overflow:hidden;
}
.right
{
overflow: visible;
***margin-left:300px;***
}
<div class="wrapper">
<div class="left">
...
</div>
<div class="right" >
...
</div>
</div>
Hope this works for you!
There are quite a few ways to accomplish, negative margins is one of my favorites:
http://www.alistapart.com/articles/negativemargins/
Good luck!
set your right to the specific width and float it, on your left just set the margin-right to 250px
.left {
vertical-align: middle;
min-height: 50px;
margin-right: 250px;
overflow: auto
}
.right {
width:250px;
text-align: right;
display: table-cell;
vertical-align: middle;
min-height: 50px;
height: 100%;
overflow: auto
}
If you need a cross browser solution, you can use my approach, clear and easy.
.left{
position: absolute;
height: 150px;
width:150px;
background: red;
overflow: hidden;
float:left;
}
.right{
position:relative;
height: 150px;
width:100%;
background: red;
margin-left:150px;
background: green;
float:right;
}
Use the simple this can help you
<table width="100%">
<tr>
<td width="200">fix width</td>
<td><div>ha ha, this is the rest!</div></td>
</tr>
</table>
This question already has answers here:
Align <div> elements side by side
(4 answers)
Closed 4 years ago.
I have a small problem. I am trying to align two divs side by side using CSS, however, I would like the center div to be positioned horizontally central in the page, I achieved this by using:
#page-wrap { margin 0 auto; }
That's worked fine. The second div I would like positioned to the left side of the central page wrap but I can't manage to do this using floats although I'm sure it is possible.
I would like to push the red div up alongside the white div.
Here is my current CSS concerning these two divs, sidebar being the red div and page-wrap being the white div:
#sidebar {
width: 200px;
height: 400px;
background: red;
float: left;
}
#page-wrap {
margin: 0 auto;
width: 600px;
background: #ffffff;
height: 400px;
}
If you wrapped your divs, like this:
<div id="main">
<div id="sidebar"></div>
<div id="page-wrap"></div>
</div>
You could use this styling:
#main {
width: 800px;
margin: 0 auto;
}
#sidebar {
width: 200px;
height: 400px;
background: red;
float: left;
}
#page-wrap {
width: 600px;
background: #ffffff;
height: 400px;
margin-left: 200px;
}
This is a slightly different look though, so I'm not sure it's what you're after. This would center all 800px as a unit, not the 600px centered with the 200px on the left side. The basic approach is your sidebar floats left, but inside the main div, and the #page-wrap has the width of your sidebar as it's left margin to move that far over.
Update based on comments: For this off-centered look, you can do this:
<div id="page-wrap">
<div id="sidebar"></div>
</div>
With this styling:
#sidebar {
position: absolute;
left: -200px;
width: 200px;
height: 400px;
background: red;
}
#page-wrap {
position: relative;
width: 600px;
background: #ffffff;
height: 400px;
margin: 0 auto;
}
I don't understand why Nick is using margin-left: 200px; instead off floating the other div to the left or right, I've just tweaked his markup, you can use float for both elements instead of using margin-left.
Demo
#main {
margin: auto;
width: 400px;
}
#sidebar {
width: 100px;
min-height: 400px;
background: red;
float: left;
}
#page-wrap {
width: 300px;
background: #0f0;
min-height: 400px;
float: left;
}
.clear:after {
clear: both;
display: table;
content: "";
}
Also, I've used .clear:after which am calling on the parent element, just to self clear the parent.
This Can be Done by Style Property.
<!DOCTYPE html>
<html>
<head>
<style>
#main {
display: flex;
}
#main div {
flex-grow: 0;
flex-shrink: 0;
flex-basis: 40px;
}
</style>
</head>
<body>
<div id="main">
<div style="background-color:coral;">Red DIV</div>
<div style="background-color:lightblue;" id="myBlueDiv">Blue DIV</div>
</div>
</body>
</html>
Its Result will be :
Enjoy...
Please Note: This works in Higher version of CSS (>3.0).
The HTML code is for three div align side by side and can be used for two also by some changes
<div id="wrapper">
<div id="first">first</div>
<div id="second">second</div>
<div id="third">third</div>
</div>
The CSS will be
#wrapper {
display:table;
width:100%;
}
#row {
display:table-row;
}
#first {
display:table-cell;
background-color:red;
width:33%;
}
#second {
display:table-cell;
background-color:blue;
width:33%;
}
#third {
display:table-cell;
background-color:#bada55;
width:34%;
}
This code will workup towards responsive layout as it will resize the
<div>
according to device width.
Even one can silent anyone
<div>
as
<!--<div id="third">third</div> -->
and can use rest two for two
<div>
side by side.
It's also possible to to do this without the wrapper - div#main. You can center the #page-wrap using the margin: 0 auto; method and then use the left:-n; method to position the #sidebar and adding the width of #page-wrap.
body { background: black; }
#sidebar {
position: absolute;
left: 50%;
width: 200px;
height: 400px;
background: red;
margin-left: -230px;
}
#page-wrap {
width: 60px;
background: #fff;
height: 400px;
margin: 0 auto;
}
However, the sidebar would disappear beyond the browser viewport if the window was smaller than the content.
Nick's second answer is best though, because it's also more maintainable as you don't have to adjust #sidebar if you want to resize #page-wrap.
The easiest method would be to wrap them both in a container div and apply margin: 0 auto; to the container. This will center both the #page-wrap and the #sidebar divs on the page. However, if you want that off-center look, you could then shift the container 200px to the left, to account for the width of the #sidebar div.
I want a nice 2 column layout using CSS float's.
Column#1 160 px
Column#2 100% (i.e. the rest of the space).
I want to place the Col#2's div first, so my layout looks like:
<div id="header"></div>
<div id="content">
<div id="col2"></div>
<div id="col1"></div>
</div>
<div id="footer"></div>
What has to be get this effect?
Neither of the above will work.
div#col2 {
width: 160px;
float: left;
position: relative;
}
div#col1 {
width:100%;
margin-left: 160px;
}
That's assuming that Column 2 should appear as a left sidebar, with col 1 as the main content.
You should use the "float" CSS property for doing this. Check out for a simple implementation here. And you can find a bit more detailed article here
You have to use float:left on first column and float:right on the second column
I think you could do something like this.
div#col2 {
padding-left: 160px;
width: 100%;
}
div#col1 {
float: left;
width: 160px;
}
This relies on #col1 coming before #col2, which might make it unusable.
This will not, but relies on #col1 being the longer:
#content {
position: relative;
}
div#col2 {
width: 160px;
position: absolute;
}
div#col1 {
width: 100%;
margin-left: 160px;
}
This'll keep the footer in place.
div#footer {
clear: both;
}
Although the question is for years ago, I provide this useful answer for any future reference and similar cases.
Putting #col1 before #col2 in markup, you may float it to the right, in case you have LTR lauout (if you have an RTL layout then float to the left) and give the other col overflow: hidden.
Note that the parent ( #content ) should have the overflow: hidden too:
#content{
overflow: hidden;
padding: 20px 0;
height: 100px;
background-color: #cdeecd;
}
#content #col1{
float: right;
width: 160px;
height: 100px;
background-color: #eecdcd;
}
#content #col2{
height: 100px;
overflow: hidden;
background-color: #cdcdee;
}
<div id="content">
<div id="col1"></div>
<div id="col2"></div>
</div>