I have to be centered a div, till here all is clear, but, I need to keep closed at left another div.
No boht centered, just center one div and keep sticky another one.
In my example, the center div (menu) and sticky div (logo.)
Maybe that's what you mean?
https://jsfiddle.net/g8c8wp34/1/
HTML:
<div class="layout-wrapper">
<div class="logo">
Logo
</div>
<div class="menu">
item 1
item 2
</div>
</div>
<div class="layout-wrapper">
<div class="col col1"></div>
<div class="col col2"></div>
<div class="col col3"></div>
</div>
CSS:
.layout-wrapper {
width: 400px;
background: #ccc;
margin: 0 auto;
}
.logo {
position: absolute;
background: #ddd;
width: 60px;
margin-left: -60px;
}
.col {
width: 32%;
background: #cdcdcd;
border: 1px solid #999;
height: 30px;
float: left;
box-sizing: border-box;
}
.col1 {
margin-right:2%
}
.col3 {
margin-left:2%
}
Or this (with fixed position logo): https://jsfiddle.net/g8c8wp34/2/
So, you want the menu to be centered and sticked to it's left a logo?
<div class="centered">
<div id="logo"></div>
<div id="menu"></div>
</div>
Wrap them into a div an center it. Float left the logo and right the menu.
Here you have the jsfiddle.
Tell me if this helps you!
Related
I am trying to create a section on my page that will contain inline-block divs (that would of various lengths). This outer div will be scales with the width of its parent (the parent has col-md-8). I'm trying to see if it's possible to float all the inner individual divs left with a right margin and have them disappear off to the right edge of the parent div. Clearly I'm missing something as these are not lining up the way I want them to.
.outer {
position: relative;
width: 330px;
height: 140px;
overflow-y: hidden;
background-color: red;
}
.box {
display: block;
height: 130px;
float: left;
margin-right: 20px;
background-color: grey;
border: 1px solid #333;
}
.box-1-col {
width: 130px;
}
.box-2-col {
width: 260px;
}
<div class="container-fluid">
<div class="row">
<div class="col-md-4">
</div>
<div class="col-md-8">
<div class="outer clearfix">
<div id="box-1" class="box box-2-col">
This is box 1
</div>
<div id="box-2" class="box box-1-col">
This is box 2
</div>
<div id="box-3" class="box box-1-col">
This is box 3
</div>
</div>
</div>
</div>
</div>
https://jsfiddle.net/xc66s1L8/4/
I have a div #1 with a variable width and variable height. Now I want to position a div #2 with fixed width and height next to the right site of #1.
These two divs should be inside another div with width: 100%, because I want to repeat those two divs.
Here is an image (white: div #1, black: div #2):
How would I do that?
I played around with floating
Using a flexbox for the rows. I put the width for the white box as inline CSS because I assume it will be calculated somehow in your code.
.container {
background: lightgreen;
padding: 3em;
}
.row {
display: flex;
height: 4em;
}
.row:not(:last-child) {
margin-bottom: 1em;
}
.flexible {
background: white;
}
.fixed {
background: black;
width: 1em;
}
<div class="container">
<div class="row">
<div class="flexible" style="width:150px"></div>
<div class="fixed"></div>
</div>
<div class="row">
<div class="flexible" style="width:500px"></div>
<div class="fixed"></div>
</div>
<div class="row">
<div class="flexible" style="width:50px"></div>
<div class="fixed"></div>
</div>
</div>
Use flex.
.container {
display: flex;
}
.secondDiv {
width: 200px;
}
You can use this example:
.container{
width: 100%;
}
.div1{
width: <div1 width>;
height: <div1 height>;
float: left;
background-color: white;
}
.div2{
float: left;
width: <div2 width>;
height: <div1 height>;
background-color: black;
}
You should group this two divs (div1 and div2) in another div, inside de container with 100% width:
<div id="container" class="container">
<div id="block1" style="float: left; width: 100%">
<div id="div1" class="div1">
</div>
<div id="div2" class="div2">
</div>
</div>
...
</div>
I'm trying to convert my website from table layout to div layout,
while with the table layout everything was more intuaitive, I get stuck every minute with this div layout, here's my current problem -
I want the text in my left div to be padded from the left and from the top.
If I pad the left DIV itself, the whole div gets expanded (even though the container div has a 700px width defined for it); If I try to margin the text itself, for some reason it only works for creating the left margin, but it doesn't effect the top margin which stays at 0px.
here's my code:
<div id="container">
<div id="left">I want some padding here
<div id="image">image</div>
</div>
<div id="middle"></div>
<div id="right">
<div id="text">Text</div>
</div>
<br style="clear: left;" />
</div>
CSS:
#container {
border: 1px solid #DCD7D4;
width: 700px;
min-height: 680px;
position: relative;
margin-left: auto;
margin-right: auto;
}
#left {
float:left;
width: 500px;
min-height: 680px;
background-color: #F6F1ED;
}
#left #image {
position: absolute;
left: 27px;
bottom: 40px;
background: green;
width: 375px;
height: 48px;
}
#right {
float: left;
width: 194px;
min-height: 680px;
background-color: #F2EEEF;
}
#right #text {
position: absolute;
left: 523px;
top: 154px;
background: yellow;
width: 150px;
height: 70px;
}
#middle {
float:left;
background: #0C9;
background-image:url(midbg.png);
width: 6px;
min-height: 680px;
}
You can add padding to your #left div together with box-sizing: border-box and the layout should remain in tact
#left
{
padding: x px;
-moz-box-sizing: border-box;
box-sizing: border-box
}
Read up on the CSS box model here: http://css-tricks.com/the-css-box-model/
Padding will affect your overall element's specs.
ALSO, this is a great trick for dealing with funky padding of various elements:
http://www.paulirish.com/2012/box-sizing-border-box-ftw/
How about either of these solutions. They work on my browser:
<div id="container">
<div id="left"><span style="padding-left: 10px; padding-top: 10px">I want some padding here</span>
<div id="image">image</div>
</div>
<div id="middle"></div>
<div id="right">
<div id="text">Text</div>
</div>
<br style="clear: left;" />
</div>
OR
<div id="container">
<div id="left"><div style="padding-left: 10px; padding-top: 10px">I want some padding here</div>
<div id="image">image</div>
</div>
<div id="middle"></div>
<div id="right">
<div id="text">Text</div>
</div>
<br style="clear: left;" />
</div>
if border-box is not working then span should work for you, check this demo
CSS
#left > span {
padding:100px;
position:absolute;
height:100%;
border:1px solid #000;
}
HTML
<div id="left">
<span>I want some padding here</span>
<!-- rest of html -->
`
EDIT
Since, your #left has child divs inside, you can not apply padding option to it.
padding is required on text directly under #left id and not a child div,so, span is suggested as <span> is an inline element and <div> is block level element.
I've got three left-floating div (1, 2 & 3) and one floating right (4), which is also the last div in my HTML code. The three on the left take up 60% of the width and the last div should fill in on the right. However div 4 only floats past the div 3 and then stops.
<body>
<div style="width: 60%; float: left; background-color: red;">
div 1
</div>
<div style="width: 60%; float: left; background-color: red;">
div 2
</div>
<div style="width: 60%; float: left; background-color: red;">
div 3
</div>
<div style="width: 40%; float: right; background-color: yellow;">
div 4
</div>
</body>
Any suggestions how to make the div go to the top of the page?
This is what you want? DEMO
I edited a bit your HTML code:
<section class="container">
<div class="block one"></div>
<div class="block two"></div>
<div class="block three"></div>
<div class="block four"></div>
</section>
Just add these CSS rules:
*, *:before, *:after {
box-sizing: border-box;
}
body, div, section {
margin: 0;
padding: 0;
}
html, body {
background: #CCC;
height: 100%;
}
.block {
height: 100px;
display: inline-block;
border: 1px solid black;
}
.block:not(.four) {
float: left;
width: calc(60% / 3);
}
.four {
width: calc(100% - 60%);
}
.container > .four {
float: right;
}
I used the calc() function for set the anchors to the elements. You can see the browser support here
EDIT Sorry, I didn't understand your question. This is what you want! DEMO =)
Cheers,
Leo!
I think what you are trying to achieve here is put some content in your page (the left floated divs) and a sidebar (the right div).
Well, there are many ways to do it, here is a method without using floats (right or left).
HTML:
<body>
<section style="width: 60%;"> <!-- Your main content goes in here -->
<div style="background-color: red;">div 1</div>
<div style="background-color: red;">div 2</div>
<div style="background-color: red;">div 3</div>
</section>
<aside style="width: 40%;" class="right"> <!-- content for right sidebar -->
<div style="background-color: yellow;">div 4</div>
</aside>
</body>
CSS:
aside,section {
display : inline-block;
padding : 0;
margin : 0;
}
aside.right {
vertical-align: top; //to bring sidebar to top
}
Here is a demo FIDDLE
I am attaching my HTML and CSS hoping that someone can help me. Basically I have a right sidebar div where the content will not push to the top. When I play around with position and height properties, the content just floats all over the page and doesn't even stay in the right sidebar. I hope someone can point me in the right direction, I have looked at numerous posts and nothing I try seems to work.
HTML:
<div id="container">
<div id="head">
</div>
<div id="menuTop">
</div>
<div id="content">
</div>
<div id="sidebar">
</div>
<div id="footer">
</div>
</div>
CSS:
#container {
margin: 0 auto;
width: 1000px;
background: url("bgbg.jpg");
border: 10px solid #000;
}
#content {
float: left;
width: 750px;
padding: 0;
background: url("bgbg.jpg");
border-right: 1px dashed #fff;
}
#sidebar {
float: right;
background: url("bgbg.jpg");
width: 250px;
}
CSS Box Model 101 - the actual width of a div (or any element) is width + padding + borders
So your two floated divs add up to 1001px
the content div # 750px + 1px border is actually 751px wide, make it's width 749px and all should be well
#container {
margin: 0 auto;
width: 1000px;
background: url("bgbg.jpg");
border: 10px solid #000;
}
#content {
float: left;
width: 750px;
padding: 0;
background: url("bgbg.jpg");
border-right: 1px dashed #fff;
display:block;
}
#sidebar {
float: right;
background: url("bgbg.jpg");
width: 200px;
}
<div id="container">
<div id="head">head
</div>
<div id="menuTop">
</div>
<div id="content">ssss
</div>
<div id="sidebar">ffff
</div>
<br style="clear:both;" />
<div id="footer">
</div>
</div>