How do I make the <hr> width 100% of the screen, not its parent?
CSS
#abc {
width: 700px;
}
hr {
width: 100%;
}
HTML
<div id="abc">adsasd<hr></div>
You cannot do it the way that you have it structured. You need the <hr> outside of that container that has a fixed width. Otherwise 100% width of the <hr> will be relative of its parent, not the page. Try
<div id="abc">
adsasd
</div>
<!-- put the hr on its own -->
<hr>
<div id="def">
asdfghjkl
</div>
Another thing that you can do is to enclose the content in a container with that width, but not the div containing the content and the hr.
<div id="row"><!-- use a class that takes up all the width of the page -->
<div class="has-width">adsasd</div> <!-- create a class with a width-->
<hr>
</div>
If it was me, I'd refactor the markup to something like:
<div id="menu">
<div class="buttons">Buttons</div>
</div>
<div id="main">
Main
</div>
and use CSS for the horizontal lines:
#menu
{
width:100%;
border-top:solid 1px black;
border-bottom:solid 1px black;
}
#menu .buttons, #main
{
width:400px;
margin:0 auto;
}
#menu .buttons
{
background-color:#F00;
}
Demo
Related
I've been trying to make a page in which there will be one image that needs to be the same height as the viewport while the width would stretch accordingly. The img needs to be centered.
Here's the tricky part (for me anyway): I would need to place a div at the bottom of that image which would have some buttons. I thought that it would be best if I can set the width of that div to be the same as the width of the img so that whenever the screen size changes, everything would stay at the same position.
Here is what I have so far in the HTML:
<div id="main_container">
<div class="exercises">
<img class="bg" src="image.png"/>
<div class="footer">
<ul class="buttons">
<li>Reset</li>
<li>Next</li>
<li>Sortie</li>
</ul>
</div>
</div>
</div>
So: height is always == viewport, width is variable.
I thought about placing a div as parent to the img, but I would still need to make that div somehow fit the size of its child (the image).
I've read some posts here, but none were too related to my issue.
edit:
I'm sorry if I wasn't clear enough. I've made an illustration of what the issue is. I hope this helps:
You can try this:
#main_container {
width:600px;
}
.exercises {
width: 100%;
}
.exercises img.bg {
max-width: 100%;
max-height: 100%;
object-fit:contain;
}
.footer .buttons {
width: 100%;
}
.buttons {
padding:0;
margin:0;
}
.buttons li {
width:100%;
height:50px;
border:1px solid #000;
list-style:none;
}
<div id="main_container">
<div class="exercises">
<img class="bg" src="http://blog.caranddriver.com/wp-content/uploads/2015/11/BMW-2-series.jpg"/>
<div class="footer">
<ul class="buttons">
<li>Reset</li>
<li>Next</li>
<li>Sortie</li>
</ul>
</div>
</div>
</div>
Obviously, edit the image URL to your own :)
Consider it a start. Change size of image in inspector and see what happens.
.exercises{background: silver; display: inline-block;}
img{ border: 1px solid black;}
ul{
margin: 0;
padding: 0;}
li{
float: left;
width: 33%;
background: #ccff00;
}
<div id="main_container">
<div class="exercises">
<img class="bg" src="https://www.techwibe.com/wp-content/uploads/2015/04/chrome_medium.jpg"/>
<div class="footer">
<ul class="buttons">
<li>Reset</li>
<li>Next</li>
<li>Sortie</li>
</ul>
</div>
</div>
</div>
Try this one may help
<div id="main_container">
<div class="exercises">
<img class="bg" src="https://static.pexels.com/photos/27714/pexels-photo-27714.jpg"/>
<div class="footer">
<ul class="buttons">
<li>Reset</li>
<li>Next</li>
<li>Sortie</li>
</ul>
</div>
</div>
</div>
<style>
#main_container{
/*Make the container follow the width of body*/
position:relative;
width:100%;
}
#exercises{
/*Make the this div follow the width of #main_container*/
width:100%;
}
.bg{
/*Make the the image follow the width of #exercises*/
width:100%;
height:auto;
}
.buttons{
/*modifying ul to the bottom position*/
position:absolute;
width:100%;
bottom:0;
}
.buttons li{
/*Style the button whatever you want*/
list-style:none;
margin:10px 2%;
padding:8px 12px;
background:orange;
width:20%;
color:white;
float:left;
}
</style>
Run code snippet to see the result
I apologize again if I've set the question in a vague manner. It was a bit complicated (for me) to formulate it. And thanks to the people who tried to help me with their solutions.
However, I decided to got with JQuery on this one and set the sizes dynamically.
This is the code with which I managed to set the width of the parent div the same size as the width of it's child img (after the img's height has been rescaled relative to the window height):
var imageResize = function () {
var screenHeight = $(window).height();
$('.bg').height(screenHeight);
var resizedImgWidth = $('.bg').width();
$('.exercises').width(resizedImgWidth);
}
$(window).resize(imageResize);
$(window).load(imageResize);
As always, anyone is welcome to give their two cents regarding my solution. (perhaps its very heavy and could be better optimized. I'm new at JS, so feel free :))
just a small question to help improve my understanding of html/CSS behaviour. I've noticed with the following code:
.nav {
border:1px solid black;
height:100px;
}
<div class="nav">
<div class="container">
<h1>Hello</h1>
</div>
</div>
I can set the height of the outer div "nav".
However, if I try and do the same with the inner div .container, this remains collapsed until it is filled with "Hello". Could I ask what explains this behaviour?
Thanks
If I understand you right, you wonder why .container can't be seen without any child elements? If you add something that has a height (as a <h1> element) it expands to the height of that element (see the difference between 1. and 2. .container)
If you want .container to be expanded by default, you can add a height: 100%, which expands it to the height of the outer container.
.nav {
border:1px dotted black;
height:100px;
margin-bottom: 20px;
}
.container {
border:1px solid red;
}
.container2 {
border:1px solid green;
height: 100%;
}
<div class="nav">
<div class="container">
<h1>Hello</h1>
</div>
</div>
<div class="nav">
<div class="container">
</div>
</div>
<div class="nav">
<div class="container2">
</div>
</div>
I have a div container in my html page and i want set its height to expand all remaining page in the screen..
How can i do that ??
That's my code :
HTML
<div class="row">
<div id="builder-container" class="col-xs-12 col-lg-9">
<div id="builder-content" > </div>
</div>
</div>
CSS
#builder-container {
background-color: #ccc;
height: 100%;
}
You have to give all of the parent elements, including the div you want to extend, a height of 100%.
Actually it would not get cover your whole page without enough content, but the best way is to give it 'position:absolute/fixed/relative' and give the same div top:whateveryouwant px; and bottom: 0px/0%; width and height :100%
JSFiddle - Edited: Check it now
CSS
body
{
margin:0;
width:100%;
height:100%;
}
#builder-container {
display:block;
position:absolute;
margin-top:5%;
left:0%;
bottom:0%;
background-color: #ccc;
height: 100%;
width:100%;
}
html
<div class="row full_height">
<h1>Test elem</h1>
</div>
css
.full_height {
height: 100vh
}
I am trying to make my logo and manu bar to follow my page as i scroll down the page,
Currently this is what i have.
CSS is;
html,body {
background-image:url(../img/background.png);
background-size:cover;
background:fixed;
}
#bar {
margin-top:55px;
width: 1920px center;
height: 30px;
background: #2E2E2E;
border: 3.2px groove #FFD700;
}
#logo {
position:absolute;
background-image:url(../img/LOGO1.png);
background-size:150px;
width:150px;
height:150px;
margin:0 auto;
z-index:1;
top:0px;
margin: 0 auto;
left:0px;
right:0px;
}
#middle
{
height:10000px;
}
and for HTML:
</head>
<body>
<div id="logo">
</div>
<div id="bar">
</div>
<div id="middle">
</div>
</body>
</html>
So please what would i need to change to make both 'bar' and 'logo' follow my scroll.
thankyou for you help
Here is a jsfiddle with how I would do it...
http://jsfiddle.net/2Zqhw/
I've wrapped both elements in a div, gave it position:fixed and width:100%
You need a div to wrap your logo and bar and use CSS to set the position to fixed.
The CSS:
#nav-fixed {
position:fixed;
}
The HTML:
<div id="nav-fixed">
<div id="logo">
</div>
<div id="bar">
</div>
</div>
You could try nesting logo and bar within another div and then setting position:fixed on the enclosing div so your HTML would look something like:
<div id="fixed_bar" style="position:fixed;">
<div id="logo"/>
<div id="bar"/>
</div>
<div id="middle">
</div>
Or you could add the enclosing div as above but define the style for it in the CSS:
#fixed_bar
{
position:fixed;
}
With the HTML:
<div id="fixed_bar">
<div id="logo"/>
<div id="bar"/>
</div>
<div id="middle">
</div>
I am using http://www.cssstickyfooter.com/ for a fluid header/footer/content page.
I am trying to do a two column layout for my site. Left div navigation; the right div content.
The left column has content vertically aligned in the center. The content is both vertically-aligned in the center as well as horizontally aligned in the center.
I'm stuck at laying out the navigation.
I would think I should be able to make a div for the nav container {float:left; width:300px;display:table;} then make the nav_content div something like {height:300px; display:table-cell; vertical-align:middle;}.
I thought at first the issue was that the container needs to span 100% height of whatever was left over after the footer and then the content would be able to vertically align the height. (The only thing I can find is 'background-hacks' to achieve this and Jscript to calculate and dynamically update absolute height. It doesn't seem right to me that those are the only options.) But when I set the parent div to a set height, then try and vertically-align the content, it still does not work. I really do not understand as all the resources I have read states that the parent contains table display and table-cell can use the vertical-align middle. (does using float mess this up?)
Here is a crudely drawn layout I am trying to accomplish.
http://i.imgur.com/VefhxU7.png
Here is the idea with the code.
<div id="wrap">
<div id="header">
</div>
<div id="main">
<div id="container">
<div id="content">
</div>
</div>
<div id="side">
<div id="nav">
</div>
</div>
</div>
</div>
<div id="footer">
</div>
#side
{
background: none repeat scroll 0 0 #B5E3FF;
float: left;
position: relative;
width: 250px;
display:table;
}
#nav
{
display:inline-block;
vertical-align:middle;
height: 350px;
width:200px;
background-color: blue;
}
What am I doing wrong? Thanks for anyone who tries to help. :)
try this :
<style>
#footer {
background-color: #999;
}
#header {
background-color: #0C6;
}
#side
{
background: none repeat scroll 0 0 #B5E3FF;
float: right;
position: relative;
width: 70%;
display:table;
height: 350px;
}
#nav
{
display:inline-block;
vertical-align:middle;
height: 350px;
width:30%;
background-color: blue;
float: left;
}
</style>
<body>
<div id="mainContainer">
<div id="header">This is header</div>
<div id="nav">This is Nav</div>
<div id="side">This is side</div>
<div id="footer">This is footer</div>
</div>
</body>