First of all I'd like to say that I am new to all this. So, here is my situation.
I have set a background image for my entire body.
I have a div .wrapper that I include in all my pages. It's main purpose is to keep my content centered and organized. It's background color is set to grey.
Inside the div .wrapper there is another div .example.
I want this particular div .example to take the background-image of the body and not the color of the .wrapper, but still keep the rest of the .wrapper's properties. Is it possible? I tried no to set the background-image of the .example the same as the body's because I think it shows like a "foreign" object...
<html>
...
<body>
<div class="wrapper">
<div class="example">
<img src="example.png">
</div>
</div> <!-- Wrapper -->
</body>
</html>
body {
background: #ffffff url("bg.jpg") repeat;
background-size: 4%;
background-position: center;
}
.wrapper {
width: 80vw;
margin: auto;
padding: 0px 0px;
background: #e9eaed;
display: block;
}
.example {
width: 100%;
/* background-color: #f6c5b6;*/
}
.example img {
width:40%;
margin: 40px auto;
display: block;
}
The Only way to achieve this is to build your div around it.
.body {
background-image: url('http://placekitten.com/g/40/40');
width: 500px; height:700px; background-repeat:repeat;
}
.wrapper {
width:300px; height:50px; background:grey; margin:0 auto;
}
.mask {
width: 300px; height:100px; margin:0 auto;
}
.left {
width: 50px; height:100px; float:left; background:red;
}
.right {
width: 50px; height:100px; float:right; background:red;
}
<div class='body'>
<div class="wrapper">
box 1
</div>
<div class="mask">
<div class="left">
box 2
</div>
<div class="right">
box 3
</div>
</div>
<div class="wrapper">
box 4
</div>
</div>
Related
I want two images each taking up half the page in width and the full page (without scrolling) in height. As illustrated in the image below. The images should be scaled (without stretching) to fill the space, even if that requires cropping.
I can't find anything online that works. The image always extends outside the bounds of a container or doesn't scale properly to fit it.
This would be easier to accomplish without Bootstrap since Bootstrap will add gutters between the columns. One way would be to set the images as background images and then use background-size:contain;
html,body {
height:100%;
margin:0;
}
nav {
height:100px;
line-height:100px;
background:#0080ff;
color:#fff;
font-size:40px;
text-align:center;
}
.column {
width:50%;
height:100%;
background-size:contain;
}
.column.left {
background-image:url(http://placehold.it/1000x800/ca6602/fff?text=Image+1);
float:left;
}
.column.right {
background-image:url(http://placehold.it/1000x800/e10227/fff?text=Image+2);
float:right;
}
<nav>Nav Bar</nav>
<div class="column left"></div>
<div class="column right"></div>
Something like this?
html,
body{
padding: 0;
margin: 0;
}
img{
max-width: 100%;
height: auto;
}
.header{
width: 100%;
height: 100px;
background: #eee;
display: flex;
justify-content: center;
align-items: center;
}
.content{
height: calc(100vh - 100px);
width: 100%;
display: flex;
align-items: center;
text-align: center;
background: #ddd;
overflow: hidden;
}
.content > div{
flex: 1;
width: 100%;
}
<div class="header">
<p>Header</p>
</div>
<div class="content">
<div class="content-one">
<img src="http://via.placeholder.com/1500x1500">
</div>
<div class="content-two">
<img src="http://via.placeholder.com/1500x1500">
</div>
</div>
I am trying to create a textbox that spans the entire width of my middle column. Whenever I set the width of the textbox to 100% though it drops below the divs and doesnt look good. How do I keep the textbox contained in the middle DIV and have it be 100% of the middle DIV?
HTML
<div class="leftsidebar">a</div>
<div class="rightsidebar">b</div>
<div class="content">
<div>
<input type="text" style=""/>
</div>
</div>
CSS
.leftsidebar { width: 60px; background:red; float:left; }
.rightsidebar { background:blue; width: 170px; float:right; }
.content { width: auto;background:yellow; }
.content input[type='text'] { width: 100%; }
http://jsfiddle.net/v0mp0wgm/
You can achieve this using flexbox. First, you want to create a containing div for your content, then assign it display: flex;. After that, move your .content div between the left and right sidebar and remove their floats. Then, give your .content and .content input[type='text'] classes a width of 100%; and you should be good to go.
.container {
display: flex;
}
.leftsidebar { width: 60px; background:red; }
.rightsidebar { background:blue; width: 163px;}
.content { width: auto; background:yellow; width: 100%; }
.content input[type='text'] { width: 100%; }
<div class="container">
<div class="leftsidebar">a</div>
<div class="content">
<div>
<input type="text" style=""/>
</div>
</div>
<div class="rightsidebar">b</div>
</div>
JSFiddle
One option is to apply float:left to everything and use calc() :
.leftsidebar {
float:left;
width: 60px;
background:red;
}
.content {
float:left;
width: calc(100% - 60px - 170px);
background:yellow;
}
.rightsidebar {
float:left;
width: 170px;
background:blue;
}
.content input[type='text'] {
display: block;
width: 100%;
}
<div class="leftsidebar">a</div>
<div class="content">
<div>
<input type="text" />
</div>
</div>
<div class="rightsidebar">b</div>
How i give 100% height to div when i give height 100% (It's not working) then i give height 100vh then min-height 100vh but it create extra space and div become more larger than required i also try max-height but not working. i want to give height 100% of element that any any small device it. In this example height is become greater than screen and make a scroll. how i get only 100% with out scroll with out missing any element.
<!doctype html>
<div class="header">asas
</div>
<div class="main">
</div>
<div id="footer">
</div>
<style>
.header
{
width:100%;
height:60px;
background:#000;
}
.main
{ width:100%;
min-height:100vh;
background:#C00;
}
#footer
{width:100%;
height:100px;
background:#0C3;
}
</style>
You can use calc() to take off the values of header and footer:
body {margin:0}
.header {
height: 60px;
background: #000;
}
.main {
min-height: calc(100vh - 160px);
background: #C00;
}
#footer {
height: 100px;
background: #0C3;
}
<div class="header">asas
</div>
<div class="main">
</div>
<div id="footer">
</div>
you can try like this
you have to give the parent always a defined height if not it is not working if you work with %
body{
margin:0;
height:100vh;
}
.header {
width: 100%;
height: 60px;
background: #000;
}
.main {
width: 100%;
height: calc(100% - 160px); /* here you calculate the 100% minus the 60px of the header and 100px of the footer*/
background: #C00;
}
#footer {
width: 100%;
height: 100px;
background: #0C3;
}
<body>
<div class="header">asas
</div>
<div class="main">
</div>
<div id="footer">
</div>
</body>
If you don't need Internet Explorer then you could use flexbox
body {
padding: 0;
margin: 0;
}
.wrapper {
display: flex;
min-height: 100vh;
flex-direction: column;
}
.main {
flex: 1;
background-color: cyan
}
.header {
background-color: red;
padding: 10px;
text-align: center;
}
.footer {
background-color: green;
padding: 10px;
text-align: center;
}
<div class="wrapper">
<div class="header">Header</div>
<div class="main">Content</div>
<div class="footer">Footer</div>
</div>
I'm creating a website that has the following setup:
<html>
<body>
<div class="wrapper">
<div class="wrapper_devider">
<div id="header"></div>
<div class="slider"></div>
<div id="container"></div>
<div class="sidebar"></div>
<div id="footer"></div>
</div>
</div>
</body>
</head>
The css is as following:
.wrapper{
margin: 0 auto;
max-width: 1500px;
}
.wrapper_devider{
width:60%;
padding:0 20%;
}
#header{
float: left;
width: 100%;
}
.slider{
display:block;
float:left;
width:100%;
background-color:#0000FF;
height:150px;
}
#container{
float: left;
width: 100%;
}
.sidebar{
float: left;
width: 100%;
background: #eeeeee;
display: inline;
}
#footer{
display:block;
float: left;
width: 100%;
}
The .wrapper has a fixed width of 1500px and the rest is done with %.
The thing I can't seem to fix is that I want the slider to be full width.
I have tried to set the width if the .slider to 1500px but it only expands to the right.
Can anybody see what I do wrong?
M.
The wrapper has a max-width of 1500, this is different then a fixed width, this would look like
width: 1500px;
Even if you set the width to 1500, it still won't work because your slider element is inside your divider.
I would recommend the following layout:
HTML
<body>
<div class="wrapper">
<div class="wrapper_divider">
<div id="header">header</div>
</div>
<div class="slider">slider</div>
<div class="wrapper_divider">
<div class="container">container</div>
<div class="sidebar">sidebar</div>
<div class="footer">footer</div>
</div>
</div>
</body>
CSS
.wrapper{
margin: 0 auto;
width: 1500px;
}
.wrapper_divider{
width:60%;
padding:0 20%;
}
#header{
float: left;
width: 100%;
}
.slider{
display:block;
float:left;
width:100%;
background-color:#0000FF;
height:150px;
}
#container{
float: left;
width: 100%;
}
.sidebar{
float: left;
width: 100%;
background: #eeeeee;
display: inline;
}
#footer{
display:block;
float: left;
width: 100%;
}
I've made an example of how it would look: http://jsfiddle.net/zon1d0gz/
OPTIONS
Move Slider outside of .wrapepr.
Make .wrapper 100% width and add new internal div of 60%.
If you cannot move the slider then make it position:absolute and offset the .wrapper with padding.
.wrapper {
position:relative;
margin: 0 auto;
max-width: 1500px;
padding-top:150px;
}
.wrapper_devider {
width: 60%;
padding: 0 20%;
}
#header {
float: left;
width: 100%;
}
.slider {
position:absolute;
left:0;
top:0;
display: block;
float: left;
width: 1500px;
background-color: #0000FF;
height: 150px;
}
#container {
float: left;
width: 100%;
}
.sidebar {
float: left;
width: 100%;
background: #eeeeee;
display: inline;
}
#footer {
display: block;
float: left;
width: 100%;
}
<div class="wrapper">
<div class="wrapper_devider">
<div id="header"></div>
<div class="slider"></div>
<div id="container"></div>
<div class="sidebar"></div>
<div id="footer"></div>
</div>
</div>
Your .wrapper class has max-width:1500px. This is an upper limit, I think you want: width:1500px.
.wrapper{
width: 1500px;
display: inline-block;
height: 100%;
}
Also wrapper_devider is set to 60%, so the slider won't span the entire 1500px since the slider is nested within wrapper_devider. I would remove that div entirely, you don't need it.
<body>
<div class="wrapper">
<div id="header"></div>
<div class="slider"></div>
<div id="container"></div>
<div class="sidebar"></div>
<div id="footer"></div>
</div>
</body>
Here's the solution with jsfiddle
I am having a weird situation with the code below, my body width is set to 980px and my header and content width is set to 100% so they should stretch throughout screen but in firefox they fall short by few pixels and in chrome they just reach the half way, the weird thing is body of page is covering whole screen I checked it by setting background:black for body and whole page turned black then how header and content can fall short with width:100% .But this code works fine on cssdesk cssdesk so what is wrong with my browsers. My screen resolution is 1366x768.
body {
width: 980px;
margin: 0;
background-color: #000;
}
.header {
color: #fff;
margin: 0;
width: 100%;
height: 60px;
background-color: #F23F21;
}
#container {
width: 100%;
}
.one {
height: 200px;
float: left;
border: 1px solid red;
width: 25%;
box-sizing: border-box;
}
.two {
height: 200px;
display: inline-block;
border: 1px solid blue;
box-sizing: border-box;
width: 50%;
}
.three {
height: 200px;
float: right;
border: 1px solid green;
box-sizing: border-box;
width: 25%;
}
<body>
<div class="header">This is header</div>
<div id="container">
<div class="one">
</div>
<div class="two">
</div>
<div class="three">
</div>
</div>
</body>
The body is not stretching to fill the screen. There are just special rules for how the background colour is handled on the body element (it is used to colour the viewport itself).
The body is the width you gave it. That width is narrower than your browser window.
Everything else is constrained within it.
Dont fix width of your body, inside body create a container div
i have modified your code check this
<style>
body{}
.container{
width:980px;
margin: 0;
background-color: #000;
}
.header{
color:#fff;
margin: 0;
width:100%;
height: 60px;
background-color:#F23F21;
}
#container{
width:100%;
}
.one{
height:200px;
float:left;
border:1px solid red;
width:25%;
box-sizing: border-box;
}
.two{
height:200px;
display:inline-block;
border:1px solid blue;
box-sizing: border-box;
width:50%;
}
.three{
height:200px;
float:right;
border:1px solid green;
box-sizing: border-box;
width:25%;
}
</style>
<body>
<div class="container">
<div class="header">This is header</div>
<div id="container">
<div class="one">
</div>
<div class="two">
</div>
<div class="three">
</div>
</div>
</div>
</body>