Jump to content

Make a space between two div's

LeonLatex

By LeonLatex
in CSS Help

 Share

Recommended Posts

LeonLatex Advanced Member

LeonLatex

Posted
Posted

Without using <br>, how cane i create a space between "column_bar_top" and "float-container"? I tried with  "display: grid; row-gap: 50px" and; "display: grid; column-gap: 50px". But that doesnt work. How can i make a gap between them without using a <br> or <p>?

<div class="wrapping">
    <div class="column_container_logo_bg">
    <div class="column_logo">X-Heading/Logo</div>
    </div>
    <div class="container_bar_bgT">
    <div class="column_bar_top">&nbsp;XXXXX-Top Bar</div>
    </div>
    <div class="float-container">
    <div class="float-child">
    <div class="green">XXX-Float Column 1</div>
    </div>
    <div class="float-child">
    <div class="blue">XXXX-Float Column 2</div>
    </div>
    </div>
    <div class="container_bar_bgB">
    <div class="column_bar_bottom">&nbsp;XXXXX-Bottom Bar</div>
    </div>
</div>

Link to comment
Share on other sites
requinix Prolific Member

requinix

Posted
Posted

Uh... margin, maybe? Or maybe you're putting your CSS on the wrong elements?

Throw what you have into a jsfiddle, make it reproduce the problem you're seeing, and then we'll have a common place to start talking. Because posting a bit of HTML and a couple attempts at CSS applied... well, somewhere, isn't really great.

Link to comment
Share on other sites
LeonLatex Advanced Member

LeonLatex

Posted
  • Author
Posted (edited)
19 hours ago, requinix said:

Uh... margin, maybe? Or maybe you're putting your CSS on the wrong elements?

No, not margin or...maybe that can be used 🤔 The top and bottom layer i am talking about wil be sticky any way, so there's no broblem if they dont move along. I have used margin on many other ellements, but not here, because i want a a gap between </div> and <div> (old and new div). So i think thats the reason i didn't think about it. Maybe thats why i havent thought about that. It's realy a simple ansvere. So i am a little embarrassing. But you know (or maybe not - what do i know) it's not easy to be to cleare in the mind after bean awake for 18-20 hours. I went to bed after this post. Another question have came up.

I have a div with a shadow I want it to have rounded corners on . But i can't make it work. Look at this code:


box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;

radius: 7px;

Or is radius only for border?

Edited by LeonLatex
Link to comment
Share on other sites
requinix Prolific Member

requinix

Posted
Posted
7 minutes ago, LeonLatex said:

I have a div with a shadow I want it to have rounded corners on . But i can't make it work. Look at this code:


box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;

radius: 7px;

Or is radius only for border?

A box-shadow draws a shadow behind the element's box, which is always rectangular. And there is no "radius" - only border-radius.

If the unrounded corners on the shadow are a problem then you can apply a matching border radius to the parent element so that it will crop the corners of the shadow.

Link to comment
Share on other sites
kicken Prolific Member

kicken

Posted
Posted (edited)

Box-shadow should work in conjunction with border-radius to create a rounded shadow at the corners.

Margin is generally how you'd go about getting space between two div tags that are next to each other.   If you're doing something like a fixed-position / absolute positioned header then margin may not work as you'd expect though.  You should post a complete example with the html and css you have, possibly as a fiddle link like I did above.

 

 

Edited by kicken
Link to comment
Share on other sites
LeonLatex Advanced Member

LeonLatex

Posted
  • Author
Posted

I cant make the

On 3/4/2022 at 8:46 AM, requinix said:

Uh... margin, maybe? Or maybe you're putting your CSS on the wrong elements?

Throw what you have into a jsfiddle, make it reproduce the problem you're seeing, and then we'll have a common place to start talking. Because posting a bit of HTML and a couple attempts at CSS applied... well, somewhere, isn't really great.

That didn't solve the problem requinix. I have done this before without a problem, but now i cant make it work. Below is the CSS and HTML + a image of how the site looks now with a explaining text what i want to happen. 

<!doctype html>
<html lang="NO" class="size">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css/wrapper_padding.css" rel="stylesheet" type="text/css">
<link href="css/logo_box.css" rel="stylesheet" type="text/css">
<link href="css/containers.css" rel="stylesheet" type="text/css">
<link href="css/text.css" rel="stylesheet" type="text/css">
<title></title>
</head>
<body class="padding">
<div class="wrapper">
	<div class="">
	<div class="column_logo"></div>
	</div><br>
	<div class="container_bar_bgT">
	<div class="column_bar_top">&nbsp;XXXXX-Top Bar</div>
	</div><br>
	<div class="float-container">
	<div class="float-child">
    <div class="green">XXX-Float Column 1</div>
	</div>
	<div class="float-child">
    <div class="blue">XXXX-Float Column 2</div>
	</div>
	</div><br>
	<div class="container_bar_bgB">
	<div class="column_bar_bottom">&nbsp;XXXXX-Bottom Bar</div>
	</div>
</div>
	</body>
	</html>
@charset "utf-8";
/* CSS Document */
/*----Main-Content-Box---------------------------------------------------------------------------------------------------------------------------------------*/
div.float-container {
    width:78%;
	height: 100%;
	margin: auto;
    padding: 0px;
	border-top: 0px solid #e1e1e1;
	border-left: 0px solid #e1e1e1;
	border-right: 0px solid #e1e1e1;
	border-bottom: 0px solid #e1e1e1;
	box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
	border-radius: 7px;
}
div.float-child {
    width: 100%;
	height: 100%;
    margin: auto;
    padding: 0px;
} 
/*-----------------------------------------------------------------------------------------------------------------------------------------------------------*/
div.container_bar_bgT {
	position: flex;
	width: 80%;
	height: 33px;
	margin: auto;
	margin-bottom: 1px;
	border-top: 0px solid #e1e1e1;
	border-left: 0px solid #e1e1e1;
	border-right: 0px solid #e1e1e1;
	border-bottom: 0px solid #e1e1e1;
	box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
	border-radius: 7px;
}
div.column_bar_top {
	flex-basis: 50%;
	width: 100%;
	height: 100%;
	margin: auto;
	background-color: #339966;
	
}
div.container_bar_bgB {
	position: flex;
	width: 80%;
	height: 33px;
	margin: auto;
	float-bottom: 1px;
	border-top: 0px solid #e1e1e1;
	border-left: 0px solid #e1e1e1;
	border-right: 0px solid #e1e1e1;
	border-bottom: 0px solid #e1e1e1;
	box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
	border-radius: 7px;
	margin-bottom: 100px;
	
}
div.column_bar_bottom {
	flex-basis: 50%;
	width: 100%;
	height: 100%;
	margin: auto;
	background-color: #339966;
	margin-bottom: 100px;
}

 

Untitled-1.png

Link to comment
Share on other sites
kicken Prolific Member

kicken

Posted
Posted

If you want the footer to be at the bottom of the view port on a short-content page, that's kind of a different problem.  In the past this was somewhat more complicated to do and involved various tricks and browser quirks but these days you can use flex or grid layouts to accomplish it without too much trouble.

I adapted your code to a flex layout as an example: 

@charset "utf-8";
html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

div.wrapper {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 80%;
    margin: 0 auto;
}

div.top {
    position: sticky;
	top: 0;
	left: 0;
    flex: 0 0 33px;
    border: 0px solid #e1e1e1;
    background-color: #339966;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
    border-radius: 7px;
}

div.center {
    flex: 1 1 calc(100% - 66px);
}

div.bottom {
    position: flex;
    flex: 0 0 33px;
    border: 0px solid #e1e1e1;
    background-color: #339966;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
    border-radius: 7px;
}

div.inset {
    margin: 2%;
    border: 0px solid #e1e1e1;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
    border-radius: 7px;
}

HTML: 

<!doctype html>
<html lang="NO" class="size">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title></title>
</head>
<body class="padding">
  <div class="wrapper">
    <div class="top">
      <div>&nbsp;XXXXX-Top Bar</div>
    </div>
    <div class="center">
      <div class="inset">
        <div class="green">XXX-Float Column 1</div>
        <div class="blue">XXXX-Float Column 2</div>
      </div>
    </div>
    <div class="bottom">
      <div>&nbsp;XXXXX-Bottom Bar</div>
    </div>
  </div>
</body>
</html>

 

Link to comment
Share on other sites
LeonLatex Advanced Member

LeonLatex

Posted
  • Author
Posted

Yesssss, there it was. I knew i had done it before and this is how. Thank you kicken 🙂 But now the div doesent center any more with the margin: auto; I tried to change it to other different properties and values. Doesent work. Do you have any solution and tilps kicken?

Sorry to forget to put back the property value in  the first <div class=""> after <div class="wrapper"> . The properties value is: container_bar_bgB

On 3/4/2022 at 8:46 AM, requinix said:

Uh... margin, maybe? Or maybe you're putting your CSS on the wrong elements?

Throw what you have into a jsfiddle, make it reproduce the problem you're seeing, and then we'll have a common place to start talking. Because posting a bit of HTML and a couple attempts at CSS applied... well, somewhere, isn't really great.

That didn't solve the problem requinix. I have done this before without a problem, but now i cant make it work. Below is the CSS and HTML + a image of how the site looks now with a explaining text what i want to happen. 

<!doctype html>
<html lang="NO" class="size">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css/wrapper_padding.css" rel="stylesheet" type="text/css">
<link href="css/logo_box.css" rel="stylesheet" type="text/css">
<link href="css/containers.css" rel="stylesheet" type="text/css">
<link href="css/text.css" rel="stylesheet" type="text/css">
<title></title>
</head>
<body class="padding">
<div class="wrapper">
	<div class="">
	<div class="column_logo"></div>
	</div><br>
	<div class="container_bar_bgT">
	<div class="column_bar_top">&nbsp;XXXXX-Top Bar</div>
	</div><br>
	<div class="float-container">
	<div class="float-child">
    <div class="green">XXX-Float Column 1</div>
	</div>
	<div class="float-child">
    <div class="blue">XXXX-Float Column 2</div>
	</div>
	</div><br>
	<div class="container_bar_bgB">
	<div class="column_bar_bottom">&nbsp;XXXXX-Bottom Bar</div>
	</div>
</div>
	</body>
	</html>
@charset "utf-8";
/* CSS Document */
/*----Main-Content-Box---------------------------------------------------------------------------------------------------------------------------------------*/
div.float-container {
    width:78%;
	height: 100%;
	margin: auto;
    padding: 0px;
	border-top: 0px solid #e1e1e1;
	border-left: 0px solid #e1e1e1;
	border-right: 0px solid #e1e1e1;
	border-bottom: 0px solid #e1e1e1;
	box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
	border-radius: 7px;
}
div.float-child {
    width: 100%;
	height: 100%;
    margin: auto;
    padding: 0px;
} 
/*-----------------------------------------------------------------------------------------------------------------------------------------------------------*/
div.container_bar_bgT {
	position: flex;
	width: 80%;
	height: 33px;
	margin: auto;
	margin-bottom: 1px;
	border-top: 0px solid #e1e1e1;
	border-left: 0px solid #e1e1e1;
	border-right: 0px solid #e1e1e1;
	border-bottom: 0px solid #e1e1e1;
	box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
	border-radius: 7px;
}
div.column_bar_top {
	flex-basis: 50%;
	width: 100%;
	height: 100%;
	margin: auto;
	background-color: #339966;
	
}
div.container_bar_bgB {
	position: flex;
	width: 80%;
	height: 33px;
	margin: auto;
	float-bottom: 1px;
	border-top: 0px solid #e1e1e1;
	border-left: 0px solid #e1e1e1;
	border-right: 0px solid #e1e1e1;
	border-bottom: 0px solid #e1e1e1;
	box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
	border-radius: 7px;
	margin-bottom: 100px;
	
}
div.column_bar_bottom {
	flex-basis: 50%;
	width: 100%;
	height: 100%;
	margin: auto;
	background-color: #339966;
	margin-bottom: 100px;
}

 

Link to comment
Share on other sites
LeonLatex Advanced Member

LeonLatex

Posted
  • Author
Posted
On 3/4/2022 at 8:46 AM, requinix said:

 

 

On 3/5/2022 at 6:41 AM, kicken said:

 

I found this article wery interesting and usefull (Pasted below). When i have learned this properly i hope i understand it to the full and have solved the problem my self. Because i think my problem lies in when to use wich at the right moment in conjunction with which, or something like that.

http://elad.medium.com/css-position-sticky-how-it-really-works-54cd01dc2d46

Link to comment
Share on other sites
This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.