Is there a possibility for the div (#contentwrapper) to take all the remaining width while floating side by side for the next example:
#maincontainer {
width:1000px;
height: 100%;
display:inline-block;
}
#leftcolumn {
float:left;
width: 100px;
height:20px;
background: blue;
}
#contentwrapper {
float:right;
width:900px;
height: 20px;
background-color: red;
}
<div id="maincontainer">
<div id="leftcolumn"></div>
<div id="contentwrapper"></div>
</div>
JsFiddle
Try using flexbox. It is better than using tables. Make sure to include the vendor prefixes in it.
https://jsfiddle.net/qa6cds9c/
<div id="maincontainer">
<div id="leftcolumn"></div>
<div id="contentwrapper"></div>
</div>
#maincontainer {
border: 1px solid red;
display: flex;
}
#leftcolumn {
border: 1px solid blue;
height: 400px;
width: 100px;
}
#contentwrapper {
border: 1px solid green;
height: 400px;
flex: 1;
}
It's really simple. Using good ol' CSS:
float-left only the left element
add margin-left to the right column to compensate the left's one width:
#leftcolumn {
float:left;
width: 100px;
background: blue;
}
#contentwrapper {
margin-left: 100px; /* same as #leftcolumn width */
background: red;
}
<div id="maincontainer">
<div id="leftcolumn">left</div>
<div id="contentwrapper">right<br>contentwrapper</div>
</div>
You could use a table instead of The divs. Or make the divs behave as a table using CSS.
When you have two table cells in a row and set the width for one then the other will fill the remaining space.
Not sure if this is considered best practice though.
Related
This is a simple piece of code, but the solutions I've tried for this problem haven't been working.
<!DOCTYPE html>
<head>
<style>
#ONE {
float: left;
border: 1px solid red;
width: 500px;
height: 50px;
}
#TWO {
float: left;
border: 1px solid yellow;
width: 500px;
height: 50px;
}
</style>
</head>
<body>
<header>
<div id="ONE"></div>
<div id="TWO"></div>
</header>
</body>
</html>
Upon resizing the browser, the "TWO" div falls below "ONE". I want to be able to keep the divs horizontal. Without resizing them based on screen width, I haven't found a suitable way to keep them horizontal on one line.
https://jsfiddle.net/hra5t6v0/
In addition to the answer by #connexo for more modern broswers that support flexbox.
* {
box-sizing: border-box;
}
header {
display: flex;
}
#ONE,
#TWO {
height: 50px;
flex: 0 0 500px;
}
#ONE {
border: 1px solid red;
}
#TWO {
border: 1px solid green
}
<header>
<div id="ONE"></div>
<div id="TWO"></div>
</header>
Again, this forces a scrollbar due to overflow at widths less than 1004px (or 1000px if using box-sizing:border-box).
JSFiddle Demo
A couple of advantages.
Firstly, the default for flexbox is nowrap so you don't have to explicitly state it.
Secondly, it doesn't suffer from the white-space issue requiring a the font reset that is often employed.
Note: In fact, you could use both techniques and the flexbox will override the inline-block if the broswer supports it....progresive enhancment!
JSfiddle Demo (both)
What you need is a combination of display: inline-block; and white-space: nowrap;.
This way you can stick to your fixed widths and the two div will stay in one line (which of course causes a horizontal scrollbar to appear if the viewport width becomes smaller than 1004px).
header {
font-size: 0; /* solves unwanted space between #ONE and #TWO */
white-space: nowrap; /* this makes inline-block children not wrap */
}
#ONE, #TWO {
display: inline-block;
font-size: 14px; /* reset font-size on children to whatever you need */
height: 50px;
width: 500px;
}
#ONE {
border: 1px solid red;
}
#TWO {
border: 1px solid yellow;
}
https://jsfiddle.net/hra5t6v0/3/
Here you go http://jsfiddle.net/DIRTY_SMITH/1j7xter3/10/
header{width: 1000px;}
#ONE {
float: left;
background-color: red;
width: 500px;
height: 50px;
}
#TWO {
float: left;
background-color: blue;
width: 500px;
height: 50px;
}
http://s4.postimg.org/mbrpxn2d9/Untitled.png
Edit: Not a duplicate. The other question doesn't contain information about divs being automatically adjusted to the words on the inside.
I have 4 divs. I have 3 divs inside another div, and I'm trying to float one to the left, one to the center, and one to the right. I'm also trying to make the width and height of the divs on the inside to be automatically adjusted to the width and height of the words on the inside of the divs. I also want the divs on the inside to stack up on top of each other, instead of being on the same line. So far, I got the left div to float to the left, and the right div to float to the right, but I just cannot get the middle div to be centered, nor get it to adjust to the width and height of the word inside of it. Please take a look at my code:
#outer {
border: 1px solid black;
width: 500px;
height: 500px;
}
#innerLeft {
border: 1px solid red;
float: left;
}
#innerMiddle {
border: 1px solid red;
margin: auto;
}
#innerRight {
border: 1px solid red;
float: right;
}
<div id='outer'>
<div id='innerLeft'>Left</div>
<div id='innerMiddle'>Middle</div>
<div id='innerRight'>Right</div>
</div>
Depending on the output of the image, I think flexbox solution would be a good way to go.
Let the container have a flexible layout with column wrapping.
Align each item based on position in the container i.e. flex-start, center and flex-end
#outer {
display: flex;
display: -ms-flex;
flex-flow: column wrap; /* Wrap the items column wise */
justify-content: flex-start; /* Items to start from the top of the container */
border: 1px solid black;
width: 500px;
height: 500px;
}
#innerLeft {
align-self: flex-start; /* Equivalent to float: left of your code */
border: 1px solid red;
}
#innerMiddle {
align-self: center; /* Equivalent to margin: auto */
border: 1px solid red;
}
#innerRight {
align-self: flex-end; /* Equivalent to float: right */
border: 1px solid red;
}
<div id='outer'>
<div id='innerLeft'>Left</div>
<div id='innerMiddle'>Middle</div>
<div id='innerRight'>Right</div>
</div>
If changing your HTML just a bit is an option, you can add span elements in your divs which will give you want, and it will work in all browsers:
#outer {
border: 1px solid black;
width: 500px;
height: 500px;
}
#innerLeft {
text-align:left;
}
#innerMiddle {
text-align:center;
}
#innerRight {
text-align:right;
}
div > div > span {
border: 1px solid red;
}
<div id='outer'>
<div id='innerLeft'><span>Left</span></div>
<div id='innerMiddle'><span>Middle</span></div>
<div id='innerRight'><span>Right</span></div>
</div>
This is what you mean?? I had Edited
#outer {
border: 1px solid black;
width: 500px;
height: 500px;
}
#innerLeft {
border: 1px solid red;
/* width: 30%; */
float: left;
}
#innerMiddle {
border: 1px solid red;
float: left;
margin: 0 5px;
}
#innerRight {
border: 1px solid red;
float: right;
}
<div id='outer'>
<div id='innerLeft'>LeftLeftLeftLeft</div> <br>
<div id='innerMiddle'>MiddleMiddleMiddleMiddle</div> <br>
<div id='innerRight'>RightRightRightRight</div>
</div>
write your html tags like this hope it help!
<div id='outer'>
<div id='innerRight'>Right</div>
<div id='innerLeft'>Left</div>
<div id='innerMiddle'></div>
</div>
I am trying to create 3 column home layout, in which center, left and right looks fine, but I am unable to create 2 slider division inside div class middle, I actually expect slider1 should come on top, but should be inside the class middle, and slider2 after slider1 inside class middle.
As you can see here JSFIDDLE , slider2 and slider1 is not coming inside div class middle
This is my effort
HTML
<div id="content-container">
<div class="middle">
<div class="slider1"></div>
<div class="slider2"></div>
</div>
<div class="left">
<div></div>
<div></div>
</div>
<div class="right">
<div></div>
<div></div>
</div>
</div>
CSS
/* Container */
#content-container{
background:white;
margin-top:10px;
margin-bottom:10px;
height:600px;
}
/* follow container height*/
.left,.right,.middle{
height:100%;
}
.left{
float: left;
width: 23%;
border:1px solid red;
}
.right{
float: right;
width: 23%;
border:1px solid red;
}
.middle{
display: inline-block;
width: 53%;
border:1px solid red;
}
/* Sliders */
.slider1 {
height: 50px;
border:1px solid green;
}
.slider2 {
height:60px;
border:1px solid green;
}
Thank you
something like this? added float: left; to slider1 also you miss spelled slider1 in css
.slider1 {
height: 50px;
border:1px solid blue;
overflow: hidden;
float: left;
background: blue;
}
http://jsfiddle.net/fa308n2b/
check your class name
.slder1 {
height: 50px;
border:1px solid green;
}
.slder1 It should be .slider1
To Put it simple, I would like a header with two elements floating to each side and vertically centered:
I started out with doing this with non-floating elements and managed to make this example.
But once I add the float:left or float:right the vertical centering is lost (I understand why, because it's not part of the flow anymore)
I wonder what is the best method to achieve this. Complete CSS redesign is happily accepted.
Thanks in Advance!
Vertical centering can be painful, especially when you are not dealing with inline elements. In this case, I would recommend taking advantage of display:table-cell.
HTML
<div id="wrapper">
<div class="cell">
<div class="content">
Content Goes here
</div>
</div>
<div class="cell">
<div class="content2">
<div class="redbox">
</div>
</div>
</div>
</div>
CSS
#wrapper {
color: white;
display: table;
border: 1px solid darkblue;
background: blue;
width: 100%;
}
.cell {
display: table-cell;
vertical-align: middle;
height: 200px;
}
.content {
float: left;
}
.content2{
float: right;
}
.redbox {
border: 2px solid darkred;
background: red;
height: 75px;
width: 75px;
}
Example: http://jsfiddle.net/YBAfF/
Add text-align:right to parent div, it makes child elements to align right side. Now add float:left to #text
#parent {
border: 1px solid black;
display: block;
line-height: 400px;
height: 400px; text-align:right
}
#text {
display: inline-block;
border: 1px dashed black;
height: 100%; text-align:left; float:left
}
#logo {
border: 1px dashed black;
height: 90%;
line-height: 90%;
vertical-align: middle;
display: inline-block;
}
#logo img {
border: 1px dashed red;
height: 100%;
}
DEMO
Here's a sample jsfiddle and the same code below. When you set the height of an element, you can set the same line-height to nested elements and they'll expand to the height. Vertically centering the content.
HTML
<div id="wrapper">
<div id="left">left</div>
<div id="right">right</div>
</div>
CSS
#wrapper{
margin:0 auto;
width 960px;
background: #eee;
height:50px;
}
#left{
float:left;
background:#ccc;
line-height:50px;
}
#right{
float:right;
background:#ddd;
line-height:50px;
}
You should add a wrapper around the elements you want to center and float them inside the wrapper. Something like that:
HTML
<div class="center">
<p class="left">Some text goes here</p>
<img src="/path/toimage" alt="My image" class="right">
</div>
CSS
.center {
margin:0 auto;
width: 400px;
}
.right {
float: right;
}
.right {
float: left;
}
Of course, this is a very simple example. You can change the values and CSS according to your needs.
Given this css:
#parent {
width: 100px;
height: 100px;
background-color: #090;
}
.childs {
width: 50px;
height: 50px;
background-color: #009;
border: 1px solid #999;
}
and this html:
<div id="parent">
<div class="childs"><p>aaa</p></div>
<div class="childs"></div>
<div class="childs"></div>
</div>
this is demo
http://jsfiddle.net/A3PJu/2/
I want that children divs placing in horizontal and not in vertical (as are they now), how make this?
float: left for children tags, not working in this case
You can use display:inline-block with white-space:nowrap. Write like this:
#parent {
width: 100px;
height: 100px;
background-color: #090;
white-space:nowrap;
font-size:0;
}
.childs {
width: 50px;
height: 50px;
background-color: #008;
border: 1px solid #999;
display:inline-block;
*display:inline;/* For IE7 */
*zoom:1;/* For IE7 */
white-space:normal;
font-size:13px;
vertical-align:top;
}
Check this http://jsfiddle.net/A3PJu/3/
The problem is that the width of the parent element is not big enough for 3 times 50px .childs. If you increase the #parent width to say 200px, float: left will work.