I got a problem with HTML, the problem is footer overlay in main like this image
I want to create a left sidebar in main page, a header at a top, and a footer. Besides I used RenderBody() for main in my HTML:
<div class="left">
LEFT
</div>
<div id="main">
#RenderBody()
</div>
<div id="footer">
built with <a target="_blank" href="http://asp.net/mvc"> ASP.NET MVC 4</a>
<button style="margin-left: 25px; float:left">Slide Toggle</button>
</div>
Here my CSS:
#main
{
position: absolute;
left:178px; top:92px; right:0; bottom:0;
}
#left {
position:absolute;
float:left;
width: 178px;
min-height: 400px;
}
#footer
{
clear: both;
padding: 10px;
text-align: right;
border-top: 1px dotted #8A8575;
border-bottom: 1px dotted #8A8575;
clear: both;
font-family: Constantia, Georgia, serif;
}
Any suggestions how to fix that problem.
Firstly, it should be div id="left" in your html since in your css "#left" not ".left".
Secondly, what lee8oi said is true.You can try his method.
Thirdly, you also can applying this method jsfiddle by adding a new div (set display:inline-block) to wrap #left and #main by set "#left" as float:left and "#main" as float:right.
.wrapper
{
display:inline-block;
}
#main
{
background-color:yellow;
float:right;
}
#left
{
float:left;
width: 178px;
background-color:blue;
}
Addition: I'm just putting background-color to make clearer to you where the div is. Good Luck!!.
Well one problem is that you can't 'position: absolute' and 'float: left' in the same element. They both position elements in different ways.
The answer to your question, I believe, would be CSS's 'display: inline-block'. Normally div's are not allowed to render side-by-side. Instead maybe you should try something like this:
<!doctype html>
<html lang="en">
<head>
<title><!-- Insert your title here --></title>
<style>
div.inline
{
color: red;
display: inline-block
}
#main
{
border: 1px solid blue;
width: 100%;
height: auto;
}
#head {
height: 100px;
width: 100%;
border: 1px solid green;
}
#left {
width: 15%;
min-height: 400px;
border: 1px solid red;
}
#body {
width: 84%;
}
#footer
{
padding: 10px;
text-align: right;
border-top: 1px dotted #8A8575;
border-bottom: 1px dotted #8A8575;
font-family: Constantia, Georgia, serif;
}
</style>
</head>
<body>
<div id="main">
<div id="head">
The header
</div>
<div id="left" class="left inline">
LEFT
</div>
<div id="body" class="inline">
#RenderBody()
</div>
<div id="footer">
built with <a target="_blank" href="http://asp.net/mvc"> ASP.NET MVC 4</a>
<button style="margin-left: 25px; float:left">Slide Toggle</button>
</div>
</div>
</body>
</html>
Related
I am wanting to place a div within another div. The point is to create a border at the top of the div. The border will include a small icon image at the left, and a headline.
I am thinking that there will actually need to be a total of three divs within the main div (lighter grey color). Main border div (100% width...the dark grey color example), then within that div will be two more divs. Div for the small icon (20% width), and a div for the headline content (80% width).
How do you position those three divs (dark grey color), within the main div (lighter grey color) to act like a border at the top? Any short examples would be greatly appreciated.
A link to an example image is provided...
enter image description here
Something like this might get you started:
.panel {
display: block;
position: relative;
width: 30vw;
height: 50vh;
background-color: #CCC;
}
.panel header {
width:100%;
background-color: #999;
border-bottom: 1px solid black;
}
.panel footer {
font-size: 60%;
position: absolute;
bottom: 0;
width:100%;
border-top: 1px solid black;
text-align: center;
}
<section class="panel">
<header>
something something
</header>
<div class='content'>
content content
</div>
<footer>
panel footer
</footer>
</section>
Use this
.cont {
width:400px;
height:500px;
background: lightgray;
position: relative;
}
.header {
position: absolute;
left: 0;
top: 0;
width:100%;
height:80px;
background: gray;
color:#fff;
font-size:40px;
font-family: sans-serif;
line-height:80px;
padding:0 0px 0 70px;
box-sizing:border-box;
}
img {
position: absolute;
left:10px;
top:50%;
transform:translateY(-50%);
}
<div class="cont">
<div class="header">
<img src="https://picsum.photos/50" alt="">
HEADLİNE
</div>
</div>
<div class="box">
<h2>
<span class="box__icon"></span>
Headline
</h2>
<div class="box__content">
Content
</div>
</div>
https://codepen.io/anon/pen/OdYaeY
Your thinking is fine, just be sure to use a naming convention that is consistent and works for you. Here's an example you can feel free to use:
.container {
width: 300px;
height: 350px;
margin: 0 auto;
font-family: Arial, Helvetica, Verdana;
font-size: .95rem;
}
.header {
background: #999;
color: white;
text-transform: uppercase;
padding:.5em;
font-size: 1.3rem;
}
.header .icon {
display:inline-block;
min-height: 1rem;
min-width: 20px;
border: 1px solid white;
}
.body {
background: #ccc;
height: 100%;
padding: 1rem;
}
<div class="container">
<div class="header">
<span class="icon"></span>
<span class="title">headline</span>
</div>
<div class="body">
This is your body block
</div>
</div>
This is my website: http://audunhilden.tk/projects/temp/#,
you can see my text box to the left, thats 3 divs. Can anyone help me to get another one on the same line? I cant get it to work, would be great if anyone coded a easier one too.
Not able to share my HTML or CSS,
Cant paste my CSS for some reason, you´re able to see it here:
http://audunhilden.tk/projects/temp/info.css
Here's a simple example. I did not use any of your css, as the html and those things are missing, but hopefully this can get you going:
CSS:
.container {
position: relative;
width: 500px;
background: red;
overflow: hidden; /*To get your parent to respect the floated divs*/
}
.one, .two, .three {
position: relative;
width: 33.33333333333333%; /*Because you only have 3 elements (100 divided by 3)*/
height: 100px;
float: left; /*To get them next to each other if all else fails*/
background: green;
}
HTML:
<div class="container">
<div class="one">
Div One
</div>
<div class="two">
Div Two
</div>
<div class="three">
Div Three
</div>
</div>
EDIT:
I tried to replicate your website to what I think you are trying to explain :).
Here's a quick screenshot:
Please see this HTML and CSS to replicate the image above :):
<!DOCTYPE html>
<html>
<head>
<title>Cocos - Audun Hilden</title>
<style>
body {
font-family: 'Roboto', sans-serif;
background: #36536B;
}
header {
background: #FFFFFF;
color: #919191;
padding: 15px;
line-height: 30px;
max-width: calc(770px - 30px);
border-radius: 3px;
margin: auto;
}
.container {
max-width: 770px;
margin: auto;
margin-top: 15px;
overflow: hidden;
}
.left, .right {
float: left;
overflow: hidden;
border-radius: 3px;
margin-right: 10px;
max-width: calc(50% - 5px);
}
.right {
margin-right: 0px;
}
.left-header, .right-header {
background: #58C5B3;
font-size: 10px;
padding: 15px;
color: #FFFFFF;
}
.left-text, .right-text {
background: #FFFFFF;
padding: 5px;
font-size: 15px;
}
</style>
</head>
<body>
<header>
FORSIDEN
</header>
<div class="container">
<div class="left">
<div class="left-header">
BORDER-LEFT
</div>
<div class="left-text">
One two three four
</div>
</div>
<div class="right">
<div class="right-header">
BORDER-RIGHT
</div>
<div class="right-text">
One two three four five six seven
</div>
</div>
</div>
</body>
</html>
Take some time to look at the HTML and CSS to try figure out what is going on. Once you understand, you'll never forget!
It's important to note that your doctype is also invalid. Try using <!DOCTYPE html>. Your code is all over the place too. You have html code outside of the body. The style tag should be inside the head tag, but ideally you should be using a stylesheet.
I just added display: inline; to the #tekst-sett div id in the css
and added acontainer to both inputs as you requested.
<div id="cont">
<div id="tekst-sett">
Insert text pls
</div>
<div id="tekst-sett">
Insert text pls
</div>
</div>
#tekst-sett {
padding-left: 3px;
padding-right: 3px;
padding-bottom: 3px;
background-color: #ffffff;
border-left: 1px solid #c2c2c2;
border-right: 1px solid #c2c2c2;
border-bottom: 1px solid #c2c2c2;
border-radius: 0 0 5px 5px;
position: relative;
width: 24%;
font-size: 15px;
display: inline;
}
is that what you meant?
You can Use the concept of Flex to achieve this. Here is the small example of what you are expecting
#main{
display:flex;
justify-content:space-around;
}
#sub1,#sub2{
width:100px;
height:100px;
border:1px solid;
}
<div id="main">
<div id="sub1">
</div>
<div id="sub2">
</div>
</div>
I think you should use floats, and maybe do a little research it will be easier next time if you solve it yourself!
I recommend you this article, maybe it will help you some further project:
https://css-tricks.com/all-about-floats/
I have 3 divs inside a main div as marked up in the HTML /CSS code below, when the page renders, the second div is twice as large as the first and last. When the page renders, because the second div is twice the size of the first and last, this causes the last div to display below the second, leaving a gap inbetween. What I want is that the third div occupies that gap that:
<html>
<head>
<title>Liquid Divs</title>
<style>
#splash {
width: 600px;
margin: 1px;
border: solid 1px #ccc;
}
.box {
width: 196px;
height: 196px;
margin: 1px;
border: solid 1px #ccc;
float: left;
}
.box2 {
width: 392px;
height: 392px;
margin: 1px;
border: solid 1px #ccc;
float: left;
}
.clear-fix {
clear: both;
}
</style>
</head>
<body>
<div id="splash">
<div class="box">
</div>
<div class="box2">
</div>
<div class="box">
</div>
<div class="clear-fix">
</div>
</div>
</body>
</html>
Can this be done with CSS or does anyone know a method to accomplish this with javascript? It will be helpful to figure this out.
Switch up your box2 to float right
.box2 {
width: 392px;
height: 392px;
margin: 1px;
border: solid 1px #ccc;
float: right;
}
Tested and it works placing the 3rd box beneath the first
if you plan on including more elements in #splash you are after the jQuery plugin masonry
here is a soltion demo for the extension problem
http://jsfiddle.net/kxMYS/
$( function() {
$('#splash').masonry({
itemSelector: 'div'
});
});
however
if you only want a solution to you're exact given problem
just change your css for .box2 to float:left;
http://jsfiddle.net/kxMYS/1/
Wrap 1st and 3rd boxes in left-container and the big box in right-container
Try this instead: http://jsfiddle.net/wcQ3L/1/
<html>
<head>
<title>Liquid Divs</title>
<style>
#splash {
width: 600px;
margin: 1px;
border: solid 1px #ccc;
}
#left-container{
float: left;
}
.box {
width: 196px;
height: 196px;
margin: 1px;
border: solid 1px #ccc;
}
.box2 {
width: 392px;
height: 392px;
margin: 1px;
border: solid 1px #ccc;
float: left;
}
.clear-fix {
clear: both;
}
</style>
</head>
<body>
<div id="splash">
<div id="left-container">
<div class="box">
</div>
<div class="box">
</div>
</div>
<div id="right-container">
<div class="box2">
</div>
</div>
<div class="clear-fix">
</div>
</div>
</body>
</html>
I have a design where I need to align a header to some content in another column.
The header can be of variable length so I am trying to work out how to align the border-bottom in all cases.
(The below is just some demo code to highlight my issue)
<div class="container">
<div class="header-container">
<h1>Short title</h1>
</div>
<div class="header-container">
<h1>This is a much longer title title</h1>
</div>
</div>
.header-container
{
width: 200px;
font-size: 1.4em;
margin: 10px 20px;
float: right;
border-bottom: 1px solid #bbb;
}
Please see
http://jsfiddle.net/bmxSY/
So in the case of the short title the first line should be blank. Is there anyway of doing this with pure css. I might do a count on the characters and add a margin-top but this isnt 100% fool proof.
EDIT*
The real issue here was that the header needed to align with content in a different containing div. So the Example HTML Markup and CSS should really have been more like...
<div class="container">
<div class="span4">
<div class="header-container">
<h1>Short title</h1>
</div>
</div>
<div class="span8">
<div class="header-container">
<h1>This is a much longer title title</h1>
</div>
</div>
</div>
.header-container {
width: 200px;
font-size: 1.4em;
margin: 10px 20px;
border-bottom: 1px solid #bbb;
text-align: left;
}
.span4
{
width:60%;
float: left;
}
.span8
{
width:40%;
float: left;
}
The easiest method is with display: inline-block: http://jsfiddle.net/thirtydot/bmxSY/7/
.container {
text-align: right;
}
.header-container {
width: 200px;
font-size: 1.4em;
margin: 10px 20px;
border-bottom: 1px solid #bbb;
text-align: left;
display: inline-block;
vertical-align: bottom;
}
Actually it is not possible, but by tricking, we can do it.
.outer {
position:relative;
display:table;
height: 200px;
width: 200px;
vertical-align: middle;
text-align: center;
border: 1px solid #CCCCCC;
background:red;
float:left
}
.inner {
width:100%;
display:table-cell;
vertical-align:bottom;
position:relative;
}
p{background:blue;border:1px solid #000}
Demo: http://www.pmob.co.uk/temp/vertical-align9.htm
Use table-cell to align the div o the bottom of the parent.
unfortunately dispaly:table-cell doesn't support margin option so you need to manipulate it through border.
CSS
.container{display:table-row; float:right}
.header-container
{
width: 200px;
font-size: 1.4em;
border-right:20px solid white; border-left:20px solid white;
border-top:10px solid white; border-bottom:10px solid white;
border-bottom: 1px solid #bbb;
display:table-cell; vertical-align:bottom
}
DEMO
I'd like to have a [Fixed][Liquid][Fixed] cross-browser compatible layout.
HTML:
body
div#col-1
div#col-2
div#col-3
CSS:
#col-1 {
width:150px;
float:left;
}
#col-2 {
width:100%;
padding:0 150x;
}
#col-3 {
positon:absolute:
right:0;
width:150px;
}
Would this work/better way to do it?
This is pretty simple.
here is the code
<html>
<head>
<style type="text/css">
#left {
float: left;
width: 150px;
border: 1px solid black;
background-color: #999;
height: 50px;
}
#right {
float: right;
width: 150px;
border: 1px solid black;
background-color: #999;
height: 50px;
}
#center {
/* margin with 10px margin between the blocks*/
margin: 0 160px;
border: 1px solid black;
height: 50px;
}
</style>
</head>
<body>
<div id="left">Text</div>
<div id="right">Text</div>
<div id="center">Text</div>
</body>
</html>
I'm using floats instead of position absolute. The advantage of using floats above absolute positioning is that you can put a nother div beneath it, lets say the footer. And just give it a clear: both and it will automatically display at the bottom of the page.
here is an example with a footer
<html>
<head>
<style type="text/css">
#left {
float: left;
width: 150px;
border: 1px solid black;
background-color: #999;
height: 50px;
}
#right {
float: right;
width: 150px;
border: 1px solid black;
background-color: #999;
height: 50px;
}
#center {
/* margin with 10px margin between the blocks*/
margin: 0 160px;
border: 1px solid black;
height: 50px;
}
#footer {
clear: both;
margin-top: 10px;
border: 1px solid black;
}
</style>
</head>
<body>
<div id="left">Text</div>
<div id="right">Text</div>
<div id="center">Text</div>
<div id="footer">footer</div>
</body>
</html>
Voila! You've got your liquid layout.
check this out:
http://siteroller.net/articles/3-column-no-tables-no-floats
But no,I don't think that would work. There are plenty of links in said article though to address your issue.
And if there is any interest, I will extend what is written there.
Okay, got it: http://www.dynamicdrive.com/style/layouts/item/css-liquid-layout-31-fixed-fluid-fixed/
I like Robert's answer. I would also add a wrapper around the left, right, center and footer. Here, I set the id to "page":
<body>
<div id="page">
<div id="left">Text</div>
<div id="right">Text</div>
<div id="center">Text</div>
<div id="footer">footer</div>
</div>
</body>
Then, you can also add the style for the "page":
#page {
min-width: 600px;
}
This way, if the user shrinks their browser down to a very small size, the content still looks good.