My navbar (940px for instance) contains 3 divs :
One aligned left (automatic sizing) containing a menu
One aligned right (defined size, 100px for instance) containing a logo
One (automatic sizing) containing an input[type="text"] that should stick to left and right divs
Each div will have a different background/opacity, there must not have overlapping between them.
He is a drawing about what I need :
+------------------+-------------------------------------------+-----------------+
| MENU | INPUT TYPE TEXT (width: 100%) | LOGO |
+------------------+-------------------------------------------+-----------------+
Do you have an idea on how to do that? Thanks in advance.
Don't float the center <div>. If you move it below the floating elements, it will sit between the floated elements. Adding overflow: hidden to the middle element prevents it from flowing beneath the floated elements.
HTML from your example:
<div class="container">
<div class="left">menu1 menu2 menu3</div>
<div class="right">right</div>
<div class="center">
<input type="text" class="form-control" />
</div>
</div>
and the CSS:
.container {
width: 400px;
height: 100px;
background-color: red;
}
.left {
height: 100px;
background: green;
float: left;
}
.center {
height: 500px;
background: blue;
overflow: hidden;
}
.right {
width: 50px;
height: 100px;
background: yellow;
float: right;
}
check this fiddle I made 3 div's and 1 container. hope it helps.
body
{
margin: 0px;
padding: 0px;
}
.container
{
width: 100%;
height: 200px;
}
.left
{
width: 50px;
height: 200px;
background: green;
float: left;
}
.center
{
width: 68%;
height: 200px;
background: blue;
float: left;
}
.right
{
width: 50px;
height: 200px;
background: yellow;
float: left;
}
Rearrange your HTML so the elements are in this order:
<div class="container">
<div class="left">menu1 menu2 menu3</div>
<div class="right">right</div>
<div class="center">
<input type="text" class="form-control" />
</div>
</div>
Then use this CSS:
.container {
width: 400px;
height: 100px;
background-color: red;
}
.left {
height: 100px;
background: green;
float: left;
}
.center {
height: 100px;
background: blue;
}
.right {
width: 50px;
height: 100px;
background: yellow;
float: right;
}
jsFiddle example
Move the item you want on the right to the first position in the HTML:
<div class="wrap">
<div class="r">Logo</div>
<div class="l">Menu</div>
<div class="c">Center content</div>
</div>
Then it's simply CSS:
.wrap { background: #ddd; margin: 10px; }
.wrap > div { padding: 10px;}
.r { float: right; background: #aaa; width: 100px; }
.l { float: left; background: #eee; width: 100px; }
.c { text-align: center; }
DEMO HERE
Related
Imagine a code like this:
.div {
width: 100%;
height: 100px;
background-color: green;
}
.div1 {
width: 100px;
height: 100px;
background-color: red;
}
.div2 {
width: 100px;
height: 100px;
background-color: blue;
}
.main {
background-color: yellow;
}
<div class="main">
<div>
<div class="div"></div>
<div class="div1"></div>
</div>
<div class="div2"></div>
</div>
It will render something like this:
I want that the blue div comes up and stay on the right of the red div. Imagine that I can´t change the divs from where they are, so I need to do it in css. How can I do it?
Without changing the markup, if you set float: left to the red <div> then you could put the blue <div> to its right side
.div {
width: 100%;
height: 100px;
background-color: green;
}
.div1 {
width: 100px;
height: 100px;
background-color: red;
float: left;
}
.div2 {
width: 100px;
height: 100px;
background-color: blue;
display: inline-block;
vertical-align: top;
}
.main {
background-color: yellow;
}
<div class="main">
<div>
<div class="div"></div>
<div class="div1"></div>
</div>
<div class="div2"></div>
</div>
The previous solution which uses float on the red div works well, but here is another possible solution:
Apply position: relative; to the blue div (to be able to move it in relation to its default position) and add top: -100px; left: 100px; to move it up next to the red div:
.div {
width: 100%;
height: 100px;
background-color: green;
}
.div1 {
width: 100px;
height: 100px;
background-color: red;
}
.div2 {
width: 100px;
height: 100px;
background-color: blue;
position: relative;
top: -100px;
left: 100px;
}
.main {
background-color: yellow;
}
<div class="main">
<div>
<div class="div"></div>
<div class="div1"></div>
</div>
<div class="div2"></div>
</div>
This can also be done with the grid CSS. Here I used a named template box and then in the "chatty verbose" CSS I put the positional related for each "block". I added classes to the CSS just for clarity but you could update to your classes.
I added some color and things just for clarity and visual references but kept the "position relate" in separate CSS chunks.
.main {
font-size: 2rem;
display: grid;
grid-template: "box";
background-color: yellow;
}
.main *,
.main::before {
grid-area: box;
}
.green-block {
place-self: start;
}
.red-block {
width: 50%;
place-self: end start;
}
.blue-block {
width: 50%;
place-self: end end;
}
.green-block {
height: 3rem;
background-color: green;
}
.red-block {
height: 3rem;
background-color: red;
}
.blue-block {
background-color: blue;
}
.blue-block,
.green-block,
.red-block {
/* color for clarity and just to super center the text in the blocks */
display: grid;
color: cyan;
font-family: sans-serif;
text-transform: uppercase;
place-items: center;
}
<div class="main">
<div>
<div class="div green-block">green</div>
<div class="div1 red-block">red</div>
</div>
<div class="div2 blue-block">blue</div>
</div>
How can I tell a div to use the entire area marked with the red arrows no matter the size of the browser and no matter the div contents?
I tried: <div style='height:100%;width:'100%'>...</div> but it only takes the horizontal area, not the vertical. Is there a way to do this?
Check out this Fiddle
https://jsfiddle.net/o7u9hxou/
html
<body>
<div id="sidebar"></div>
<div id="wrapper">
<div id="topbar"></div>
<div id="else"></div>
</div>
</body>
css
body {
box-sizing: border-box;
height: 100vh;
margin: 0px;
padding: 0px;
}
#else {
background-color: green;
height: 90vh;
}
#sidebar {
background-color: pink;
display: inline-block;
float: left;
height: 100%;
min-width: 50px;
width: 10%;
}
#topbar {
background-color: yellow;
height: 10vh;
min-height: 20px;
}
#wrapper {
display: inline-block;
float: right;
height: 100%;
width: 90%;
}
I have a problem. I want to center the second div
<div class="a">
<div class="b">
</div>
</div>
<style>
.a {
width: 400px;
height: 300px;
background: #000000;
}
.b {
width: 100px;
height: 50px;
background: #454545;
float: right;
}
</style>
I want to center the letter b like line-height: 300px;
As per your question, what you want is, to vertically-align the inner <div> as compare to its parent <div>.
So for that you've to slightly change your code as:
CSS:
.a {
width: 400px;
height: 300px;
background: #000000;
vertical-align: middle;
display: table-cell;
}
And by this you're good to go.
I am having trouble with some floated boxes in CSS.
<div class="container">
<div class="one">One</div>
<div class="two">Two</div>
<div class="tre">Three - The HTML structure should stay like this, but this box should be starting to the left of the red box.</div>
</div>
Here is the pen:
http://codepen.io/anon/pen/myKzMd
I want the left green box to start on the same height as the red one. HTML structure should stay as is.
Thanks,
Sascha
This code below will get the result you want.
HTML
<div class="container">
<div class="one">One</div>
<div class="two">Two</div>
<div class="tre">Three - The HTML structure should stay like this, but this box should be starting to the left of the red box.</div>
</div>
CSS
.container {
height:400px;
border: 5px solid green;
}
.one {
height: 100px;
background: red;
width: 60%;
float: right;
margin-bottom: 10px;
}
.two {
height: 100px;
background: blue;
width: 60%;
float: right;
}
.tre {
height: 150px;
background: green;
width: 40%;
}
EDIT: Updated the answer with full code, to avoid confusing, since OP has updated the demo in the question. So no float on .tre would be the best solution to me.
.tre {
float: left;
}
Dont forget to put overflow:hidden in parent div ie .container because once you float the child elements you have to put overflow:hidden in its
try this out :
.container {
height:400px;
border: 5px solid green;
}
.one {
height: 100px;
background: red;
width: 60%;
float: right;
margin-left:40%;
margin-bottom: 10px;
}
.two {
height: 100px;
background: blue;
width: 60%;
float: right;
}
.tre {
height: 150px;
background: green;
width: 40%;
}
.container {
height:400px;
border: 5px solid green;
}
.one {
width: 40%;
height: 100%;
float: left;
background: blue;
}
.two, .three {
width: 60%;
height: 50%;
float:right;
}
.two {
background: yellow;
}
.three {
background: red;
}
You can change your structure like below...
<div class="container">
<div class="one">One</div>
<div class="tre">Three - The HTML structure should stay like this, but this box should be starting to the left of the red box.</div>
<div class="two">Two</div>
</div>
I have two divs that I want to float on the same line. I don't want the right one to wrap until the window gets around 250px wide.
I am setting the initial widths of the divs to percentages and this seems to be causing issues. The right div will wrap to a new line well before it shrinks to a min-width of 100px;
<div id="#container">
<div id="left">
<div id="box"></div>
</div>
<div id="right">
<h1>Hello World</h1>
</div>
</div>
#container {
display: table;
width: 100%;
}
#box {
width: 100px;
height: 100px;
background: gray;
display: inline-block;
max-width: 100%;
}
#left {
float: left;
width: 23.6%;
min-width:150px;
background: gold;
text-align: center;
}
#right {
float: left;
width: 76.4%;
min-width:100px;
background: pink;
}
http://jsfiddle.net/5C6GB/
Removing the width on the right div partially solved the problem.
But it looks like I had to resort to using display:table*
http://jsfiddle.net/5C6GB/3/
<div id="container">
<div class="tr">
<div id="left" class="td">
<div id="box"></div>
</div>
<div id="right" class="td">
<!-- <h1>Hello World</h1> -->
</div>
</div>
</div>
#container {
display: table;
width: 100%;
background: red;
height: 100px;
}
#box {
width: 100px;
height: 100px;
background: gray;
display: inline-block;
max-width: 100%;
}
#left {
width: 25%;
min-width:150px;
background: gold;
text-align: center;
height: 100%;
}
#right {
min-width:100px;
background: pink;
width: 75%;
vertical-align: bottom;
}
.tr {
display: table-row;
width: 100%;
}
.td {
display: table-cell;
}
#media only screen and (max-width: 600px) {
#left, #right {
display:block;
width: 100%;
min-height: 100px;
}
.tr {
display: block;
}
#container {
display: block;
}
}
It's the min-width:150px; in the left div which is causing the right div to wrap to a new line well before it shrinks to a min-width of 100px;
#left {
float: left;
width: 23.6%;
min-width:150px; /*remove or change this to a smaller amount */
background: gold;
text-align: center;
}
FIDDLE