I'm about to make a website but I'm getting stuck on the css. For some reason, there's a space between the video slideshow and the side bar. Can anyone tell me why this is?
Below is a picture of what my web browser displays when given the code.
<html>
<head>
<link href="stylesheet.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id='header'>
<p>Header</p>
</div>
<div id='picture_gallery'>
<p>Picture Gallery</p>
</div>
<div id='nav_bar'>
<p>Nav Bar</p>
</div>
<div id='vision_statement'>
<p>Vision Statement</p>
</div>
<div id='video_slideshow'>
<p>Video Slideshow</p>
</div>
<div id='sidebar'>
<p>Side Bar</p>
</div>
<div id='footer'>
<p>Footer</p>
</div>
</body>
#header {
border: 1px solid black;
height: 50px;
width: auto;
text-align: center;
}
#picture_gallery {
border: 1px solid black;
height: 50px;
width: auto;
text-align: center;
}
#nav_bar {
border: 1px solid black;
height: 50px;
width: auto;
text-align: center;
}
#vision_statement {
border: 1px solid black;
display: inline-block;
float: left;
height: 50px;
width: 33%;
text-align: center;
}
#video_slideshow {
border: 1px solid black;
display: inline-block;
height: 50px;
width: 33%;
text-align: center;
}
#sidebar {
border: 1px solid black;
display: inline-block;
float: right;
height: 50px;
width: 33%;
text-align: center;
}
#footer {
border: 1px solid black;
height: 50px;
width: auto;
text-align: center;
}
Change some in your css Define box-sizing:border-box;
as like this
#sidebar, #vision_statement, #video_slideshow{
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
}
#header {
border: 1px solid black;
height: 50px;
width: auto;
text-align: center;
}
#picture_gallery {
border: 1px solid black;
height: 50px;
width: auto;
text-align: center;
}
#nav_bar {
border: 1px solid black;
height: 50px;
width: auto;
text-align: center;
}
#vision_statement {
border: 1px solid black;
display: inline-block;
float: left; // add this float:left
height: 50px;
width: 33%;
text-align: center;
}
#video_slideshow {
border: 1px solid black;
display: inline-block;
height: 50px;float: left; // add float:left
width: 33%;
text-align: center;
}
#sidebar {
border: 1px solid black;
display: inline-block;
float: right;
height: 50px;
width: 34%; // add width :34%
text-align: center;
}
#footer {
border: 1px solid black;
height: 50px;
width: auto;
text-align: center;
clear:both; // add this clear both;
}
Demo
Its working fine now.. Jus set the position:absolute to your sidebar style..
Here is the updated code for css:
#sidebar {
border: 1px solid black;
display: inline-block;
position:absolute;
height: 50px;
width: 32%;
text-align: center;
}
Demo
You need to set the widths of the elements as 33.3333% or something similar, because 33% on each leaves a gap of 1%.
The issue you are having with them not fitting with that width is because of the 1px border you have set. With the traditional box model, a border is not contained within the 33.33% width, so it means the actual width is 33.33% + 1px.
To fix this, you can use the border-box box model. I use it all the time -- works much better.
Read here as to why and what it does:
http://www.paulirish.com/2012/box-sizing-border-box-ftw/
Simply add:
* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
to your css file. Then change the widths of the three elements to
width:33.33%;
This will make all of the boxes exactly the same width and have them all fit on the same line.
Related
i want this result :
and this is my HTML code:
<style>
.blue_box {
border: 10px solid blue;
padding: 0.5em;
width: 150px;
float:right;
height: 100px;
}
.red_box {
border:15px solid red;
padding : 1.3em;
width:min-content;
height:min-content;
margin:1em;
}
</style>
<div class="blue_box">Hooray, a box!</div>
<div class="red_box"></div>
to put the 2 boxes ander each other.
You can use flexbox using align-items: flex-end with flex-direction: column
section {
display: flex;
flex-direction: column;
align-items: flex-end
}
.blue_box {
border: 10px solid blue;
padding: 0.5em;
width: 150px;
height: 100px;
}
.red_box {
border: 15px solid red;
padding: 1.3em;
width: min-content;
height: min-content;
margin: 1em 0 1em 1em;
}
<section>
<div class="blue_box">blue</div>
<div class="red_box">red</div>
</section>
You are almost there. You can clear any floated element by using:
clear: [left | right | both]
To create your desired output, you only need to add two styles to your .red_box:
float: right
clear: right
Working Example:
.blue_box {
border: 10px solid blue;
padding: 0.5em;
width: 150px;
float: right;
height: 100px;
}
.red_box {
float: right;
clear: right;
border: 15px solid red;
padding: 1.3em;
width: min-content;
height: min-content;
margin: 1em 0 1em 1em;
}
<div class="blue_box">Hooray, a box!</div>
<div class="red_box"></div>
Further Reading:
https://developer.mozilla.org/en-US/docs/Web/CSS/clear
You can use position property.
<style>
.blue_box {
border: 10px solid blue;
padding: 0.5em;
width: 150px;
/* float:right; */
height: 100px;
}
.red_box {
border: 15px solid red;
padding: 1.3em;
width: min-content;
height: min-content;
margin: 1em;
position: fixed;
left: 106px;
}
</style>
<div class="blue_box">Hooray, a box!</div>
<div class="red_box"></div>
I have given my divs a min-width.
But if the width increases to more that this then the width should be percentage of the parent container.
I can't for the life of me figure out why I am unable to fix this silly thing.
Any help will be appreciated.
https://jsfiddle.net/q6u3sh5f/
In the fiddle above you can see the wrap's white border extends the width of the window but my divs have a mind of their own.
<html>
<body>
<div class = "wrap">
<div class="date">Date</div>
<div class="month">Month</div>
<div class="task">Task</div>
<div class="status">Status</div>
</div>
</body>
</html>
body {
background-color: #4efa6d;
}
.wrap {
width: 100%;
border: 1px solid white;
}
.date {
min-width: 60px;
width: 6.25%;
float: left;
border: 1px solid red;
margin: 5px;
padding: 5px;
}
.month {
min-width: 70px;
width: 6.25%;
float: left;
border: 1px solid red;
margin: 5px;
padding: 5px;
}
.task {
min-width: 540px;
width: 67.5%;
width: auto;
float: left;
border: 1px solid red;
margin: 5px;
padding: 5px;
}
.status {
min-width: 100px;
width: 12.50%;
float: left;
border: 1px solid red;
margin: 5px;
padding: 5px;
}
You can do using flex.(hope this is not an issue)
float has become old as of now.
I have moved px to random % for min-width feel free to modify this.
fiddle to playaround.
body {
background-color: #4efa6d;
}
.wrap {
width: 100%;
border: 1px solid white;
display:flex;
}
.date, .month {
min-width: 2%;
width: 6.25%;
border: 1px solid red;
margin: 5px;
padding:5px;
}
.task {
min-width: 10%;
width: 67.5%;
margin: 5px;
padding:5px;
border: 1px solid red;
}
.status {
min-width: 5%;
width: 12.5%;
border: 1px solid red;
margin: 5px;
padding:5px;
}
<html>
<body>
<div class = "wrap">
<div class="date">Date</div>
<div class="month">Month</div>
<div class="task">Task</div>
<div class="status">Status</div>
</div>
</body>
</html>
I have a page where I'm displaying the status of two websites -- as in if they're currently up and running, or not. If the site is up, I want the block to have a light green background, and if not, a light red one. And the site's name should be centered inside the block.
This is what I've tried so far:
body {
font-family: sans-serif;
}
#container {
width: 800px;
height: 600px;
margin: 0 auto;
border: 1px solid #ccc;
}
#smallcontainer {
width: 208px;
height: 100px;
margin: 200px auto auto;
}
.status {
height: 100px;
width: 100px;
background: #efefef;
float: left;
margin-left: 2px;
border: 1px solid #ccc;
}
<div id="container">
<div id="smallcontainer">
<div class="status"></div>
<div class="status"></div>
</div>
</div>
It works (see full screen output), but I feel like I'm way off. How do I do something simple as this using CSS, the correct way? I feel like my code is a hack. And how would you write the text exactly in the center of the block, vertically and horizontally?
And is it possible to have it such a way that it works across all desktop screen sizes? Maybe I should specify width and height in percentage as opposed to pixels?
You can use flexbox. support
HTML
<div id="container">
<div class="status"></div>
<div class="status"></div>
</div>
CSS
#container {
width: 800px;
height: 600px;
margin: 0 auto;
border: 1px solid #ccc;
display: flex;
align-items: center;
justify-content: center;
}
.status {
height: 100px;
width: 100px;
background: #efefef;
margin-left: 2px;
border: 1px solid #ccc;
}
http://jsfiddle.net/b9n3h1en/
Try this Fiddle, aligned text vertically and horizontally in center of the div.
body {
font-family: sans-serif;
}
#container {
width: 800px;
height: 600px;
margin: 0 auto;
border: 1px solid #ccc;
}
#smallcontainer {
width: 208px;
height: 100px;
text-align: center;
margin: 200px auto auto;
}
.status {
height: 100px;
width: 100px;
background: #efefef;
float: left;
margin-left: 2px;
border: 1px solid #ccc;
line-height: 100px;
}
Try this jsfiddle
body {
font-family: sans-serif;
}
#container {
width: 100%;
height: 400px;
margin: 0 auto;
border: 1px solid #ccc;
position:relative;
}
#smallcontainer {
width: 208px;
height: 100px;
position:absolute;
left:50%;
top:50%;
margin-left:-100px;
margin-top:-50px;
}
.status {
height: 100px;
width: 100px;
background: #efefef;
float: left;
margin-left: 2px;
border: 1px solid #ccc;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-box-pack: center;
-webkit-box-align: center;
display: -moz-box;
-moz-box-orient: vertical;
-moz-box-pack: center;
-moz-box-align: center;
display: box;
box-orient: vertical;
box-pack: center;
box-align: center;
text-align:center;
}
Also see more about "display:flexbox"
https://developer.mozilla.org/en-US/docs/Web/CSS/display
Here's how I'd do it:
HTML:
<div id="container">
<div id="smallcontainer">
<div class="status">
<div class="border">
<div class="txt">Text Here</div>
</div>
</div>
<div class="status">
<div class="border">
<div class="txt">More Text Here</div>
</div>
</div>
</div>
</div>
CSS:
* {
box-sizing: border-box;
}
body {
font-family: sans-serif;
}
#container {
width: 95%;
height: 400px;
margin: 0 auto;
border: 1px solid #ccc;
position: relative;
}
#smallcontainer {
width: 208px;
height: 100px;
margin: 0 auto;
position: relative;
top: 50%;
transform: translateY(-50%);
}
.status {
height: 100%;
width: 50%;
float: left;
text-align: center;
padding: 2px;
}
.border {
background: #efefef;
border: 1px solid #ccc;
width: 100%;
height: 100%;
position: relative;
}
.txt {
position: relative;
top: 50%;
transform: translateY(-50%);
}
See the fiddle here: http://jsfiddle.net/bootsified/kf7Lbq24/
You can add negative margins to each of the divs you want to put exactly in the center. Note that for this the width and height should be in pixels.
body {
font-family: sans-serif;
}
#container {
width: 800px;
height: 600px;
border: 1px solid #ccc;
position: absolute;
left: 50%;
top: 50%;
margin-left: -400px;
margin-top: -300px;
}
#smallcontainer {
width: 208px;
height: 100px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -104px;
margin-top: -50px;
}
.status {
height: 100px;
width: 100px;
background: #efefef;
float: left;
margin-left: 2px;
border: 1px solid #ccc;
}
<div id="container">
<div id="smallcontainer">
<div class="status"></div>
<div class="status"></div>
</div>
</div>
CODE:
.company-logo-wrap{
display: block;
background: #fff;
margin-left: -15px;
padding: 10px;
border: 1px solid #a5a5a5;
text-align: center;
height: 400px;
}
Tried inline block, float etc, couldn't get it work..
I cannot use padding / margin as it's user upload img, so the size is not always the same.
FIDDLE
You can use vertical-align: middle property, which will work only with display: table-cell/table
.company-logo-wrap{
display: table-cell;
background: #fff;
margin-left: -15px;
padding: 10px;
border: 1px solid #a5a5a5;
text-align: center;
height: 400px;
vertical-align: middle;
}
JSFiddle
Use display:table and table-cell
.company-logo-wrap{
display:table;
background: #fff;
margin-left: -15px;
border: 1px solid red;
text-align: center;
height: 400px;
width:100%
}
.company-logo-inner{
display:table-cell;
vertical-align:middle;
background:grey
}
DEMO
Use following Css
.company-logo-wrap{
display: table;
background: #fff;
margin-left: -15px;
padding: 10px;
border: 1px solid #a5a5a5;
text-align: center;
height: 400px;
width:100%
}
.company-logo-inner {
display: table-cell;
vertical-align: middle;
}
HTML
<div class="main">
<div class="box"></div>
</div>
CSS
.main{ height:500px; border:1px red solid;position:relative}
.box{width:40px; height:40px; background:red; }
/* for centering */
.box{ display: inline-block; }
.main{ text-align: center; }
.main:after{ content: ""; display: inline-block; height: 100%; vertical-align: middle; }
Check this http://jsfiddle.net/SxxWV/11/
I have some markup:
<div class="container">
<div class="one">column a<br />column a</div>
<div class="two">column b</div>
</div>
Content in the 2 inner divs are of variable height and generated dynamically.
I am just using some standard CSS tricks to give the 2 inner divs the same height:
.container{
overflow: hidden;
padding: 20px;
border: 1px solid blue;
}
.one{
border-right: 1px solid red;
float: left;
width: 64%;
padding-bottom: 500px;
margin-bottom: -500px;
}
.two{
float: right;
width: 34%;
padding-bottom: 500px;
margin-bottom: -500px;
}
And a fiddle: http://jsfiddle.net/FnWG8/
Problem: While I get a line between the 2 divs, the line extends all the way to the bottom, hitting the container. This is due to not knowing the max height of the 2 inner divs and thus having to use the padding-bottom: 500px and margin-bottom: -500px trick.
I would like to have the line dividing the 2 inner divs, but there should be some space between the bottom of the line and the containing div:
What can be done to achieve this?
try this, I think it can do what you want:
.container{
overflow: hidden;
padding: 20px;
border: 1px solid blue;
}
.one{
border-right: 1px solid red;
float: left;
width: 65%;
display: inline-block;
}
.two{
border-left: 1px solid red;
float: left;
width: 35%;
display: inline-block;
margin-left: -1px;
}
See if it helps
replace this CSS with current one
.container{
overflow: hidden;
padding: 20px;
border: 1px solid blue;
}
.one{
border-right: 1px solid red;
float: left;
width: 65%;
margin-bottom: 5px;
}
.two{
float: right;
width: 35%;
margin-bottom: 5px;
}
Try this
CSS
.container{
overflow: hidden;
padding: 20px;
border: 1px solid blue;
}
.one{
border-right: 1px solid red;
float: left;
min-height:10px;
width: 65%;
padding-bottom: 40px;
margin-bottom: -500px;
}
.two{
float: right;
min-height:40px;
width: 35%;
padding-bottom: 500px;
margin-bottom: -500px;
}
change CSS rule labeled ".one" as follows (comment out padding/margin settings)
.one{
border-right: 1px solid red;
float: left;
width: 65%;
/*padding-bottom: 500px;
margin-bottom: -500px;*/
}