Sets divs one into another without falling out each other - html

I want to center my divs like in the picture below.
The container is half of the screen.
<div id="continer" style="width:50%; height:50%; display:inline-block; ">
<div id="group" style=" width:100%; height:30%; display:inline-block; ">
<div id="right" style="display: table-cell;"></div>
<div id="left" style="display: table-cell;"></div>
</div>
<div id="group" style=" width:100%; height:30%; display:inline-block; ">
<div id="right" style="display: table-cell;"></div>
<div id="left" style="display: table-cell;"></div>
</div>
<div id="group" style=" width:100%; height:30%; display:inline-block; ">
<div id="right" style="display: table-cell;"></div>
<div id="left" style="display: table-cell;"></div>
</div>
</div>


You could do this like that:
.main{
background-color:red;
padding:10px;
display:flex;
flex-direction:column;
}
.sub{
background-color:green;
padding:10px;
display:flex;
flex-direction:row;
justify-content:space-around;
margin:10px 0;
}
.inner{
background-color:yellow;
padding:10px;
margin:10px;
}
.inner:nth-child(1){
flex-grow:1;
}
.inner:nth-child(2){
flex-grow:3;
}
<div class="main">
<div class="sub">
<div class="inner">
</div>
<div class="inner">
</div>
</div>
<div class="sub">
<div class="inner">
</div>
<div class="inner">
</div>
</div>
<div class="sub">
<div class="inner">
</div>
<div class="inner">
</div>
</div>
</div>


Using bootstrap it's very simple, check this script. It will be also responsive:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<html>
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</head>
<body>
<div class="container" style="padding-top:50px;">
<h4>
bootstrap grid view/ column example
</h4>
<div class="row" style="border: 1px solid black; padding:10px;">
<div class="col-lg-4 col-md-4 col-sm-4" style="border: 1px solid black;">
this column is 4/12 wide
</div>
<div class="col-lg-1 col-md-1 col-sm-1">
</div>
<div class="col-lg-7 col-md-7 col-sm-7" style="border: 1px solid red;">
this column is 7/12 wide
</div>
</div>
<div class="row" style="border: 1px solid black; padding:10px;">
<div class="col-lg-4 col-md-4 col-sm-4" style="border: 1px solid black;">
this column is 4/12 wide
</div>
<div class="col-lg-1 col-md-1 col-sm-1">
</div>
<div class="col-lg-7 col-md-7 col-sm-7" style="border: 1px solid red;">
this column is 7/12 wide
</div>
</div>
<div class="row" style="border: 1px solid black; padding:10px;">
<div class="col-lg-4 col-md-4 col-sm-4" style="border: 1px solid black;">
this column is 4/12 wide
</div>
<div class="col-lg-1 col-md-1 col-sm-1">
</div>
<div class="col-lg-7 col-md-7 col-sm-7" style="border: 1px solid red;">
this column is 7/12 wide
</div>
</div>
</div>
</body>
</html>


Here an example similar to your code:
div
{
border: 1px solid black;
padding: 5px;
border-spacing: 5px;
}
<div style="width:50%;display:table">
<div style="display:table-row">
<div style="width:30%; display: table-cell;"></div>
<div style="display: table-cell;"></div>
</div>
<div style="display:table-row">
<div style="display: table-cell;"></div>
<div style="display: table-cell;"></div>
</div>
<div style="display:table-row">
<div style="display: table-cell;"></div>
<div style="display: table-cell;"></div>
</div>
</div>

Related

How to make my layout responsive using Bootstrap 4

I have the following Grid system which looks like this:
<div class="container" style="margin-top: 25px">
<div class="row">
<div class="col-8">
<div class="row">
<div class="col-12" style="border: 1px solid black">A1</div>
<div class="col-12" style="border: 1px solid black">A2</div>
<div class="col-12" style="border: 1px solid black">A3</div>
<div class="col-12" style="border: 1px solid black">A4</div>
<div class="col-12" style="border: 1px solid black">A5</div>
</div>
</div>
<div class="col-4">
<div class="row" style="height: 100%">
<div class="col-12" style="border: 1px solid black; height: 100%">B</div>
</div>
</div>
</div>
</div>
https://codepen.io/slava4ka/pen/QWWwOax
How can we make it so that when reducing the size of the visibility zone to .col-sm-, the grid looks like this:

I find this way to be a bit cleaner to read the html. But there are probably lots of ways to achieve these results depending on the use case.
<style>
#media (min-width: 768px){
.special-col{
position: absolute;
right: 0;
}
}
</style>
<div class="container" style="margin-top: 25px">
<div class="row">
<div class="col-12">
<div class="row">
<div class="col-md-8" style="border: 1px solid black">A1</div>
<div class="col-md-8" style="border: 1px solid black">A2</div>
<div class="col-md-8" style="border: 1px solid black">A3</div>
<div class="col-md-4 special-col" style="border: 1px solid black;height:100%;">B</div>
<div class="col-md-8" style="border: 1px solid black">A4</div>
<div class="col-md-8" style="border: 1px solid black">A5</div>
</div>
</div>
</div>
</div>

Since Bootstraps4 uses Flex-Box you could try this:
<div class="container" style="margin-top: 25px">
<div class="row">
<div class="col-md-8 col-sm-12">
<div class="row">
<div class="col-12" style="border: 1px solid black">A1</div>
<div class="col-12" style="border: 1px solid black">A2</div>
<div class="col-12" style="border: 1px solid black">A3</div>
</div>
</div>
<div class="col-md-4 col-sm-12">
<div class="row" style="height: 100%">
<div class="col-12" style="border: 1px solid black; height: 100%">B</div>
</div>
</div>
<div class="col-md-8 col-sm-12">
<div class="row">
<div class="col-12" style="border: 1px solid black">A4</div>
<div class="col-12" style="border: 1px solid black">A5</div>
</div
</div>
</div>
</div>
However, your B element would need a fixed height, otherwise it will be as tall as the others

Alternative for html layout with only part of the page scrolling

Similar to html layout with only part of the page scrolling But I'm looking for a fluid layout.
The problem with the current related question is, it was using float which resulting in a fixed view on the mobile view. I've tried using bootstrap span but I'm not sure if it was the alternative to the current snippet:
<div style="width:1250px;">
<div style="float:left; width:1000px">
<div style="height:120px; border:1px solid #ff00ff;">Testing Content</div>
<div style="height:200px; border:1px solid #fff000;">Sample Body</div>
</div>
<div style="float:right; width:100px; height:320px; overflow:auto;">
<p>items</p>
<p>items</p>
<p>items</p>
<p>items</p>
<p>items</p>
<p>items</p>
<p>items</p>
<p>items</p>
<p>items</p>
<p>items</p>
</div>
</div>
Bootstrap snippet:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<div class="row">
<div class="col-xs-5 col-12">
<div style="height:100px; border:1px solid #ff00ff;" class="col-xs-12 col-12">Testing Content1</div>
<div style="height:120px; border:1px solid #ff00ff;" class="col-xs-12 col-12">Testing Content2</div>
<div style="height:200px; border:1px solid #fff000;" class="col-xs-12 col-12">Sample Body</div>
</div>
<div class="col-xs-7 col-12">
<div style="border: 1px solid #ff00ff; height: 420px;
overflow: auto;">
<div>
<span>Scrollable</span>
</div>
<div style="height:1000px"></div>
</div>
</div>
</div>
How to implement bootstrap span or other alternative for fluid layout with only part of the page scrolling?

So you should use height:100vh for displaying full height of browser
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<div class="row">
<div class="col-xs-5 col-12">
<div style="height:100px; border:1px solid #ff00ff;" class="col-xs-12 col-12">Testing Content1</div>
<div style="height:120px; border:1px solid #ff00ff;" class="col-xs-12 col-12">Testing Content2</div>
<div style="height:200px; border:1px solid #fff000;" class="col-xs-12 col-12">Sample Body</div>
</div>
<div class="col-xs-7 col-12">
<div style="border: 1px solid #ff00ff; height: 100vh;
overflow: auto;">
<div>
<span>Scrollable</span>
</div>
<div style="height:4000px"></div>
</div>
</div>
</div>

Box shadow not working properly

Although I have ask the same question two times but I'm not getting any proper solution for this.I dont know what is wrong with my code. so here I'm posting the whole code (I know its against the community standard but seriously I want a solution for my problem and I request you guys to have a look at this and please keep patience) I'm new to web development field, please help me.
My problem is that I need to apply box shadow to #main-content-area to its top side and as well as left and right side (50% from top side)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#top-bar{
background-color:black;
color:white;
}
#txt-bar{
height:40px;
background-color:pink;
position:relative;
z-index:4;
}
#link-bar{
background-color:red;
height:40px;
z-index:4;
}
#image{
position:relative;
z-index:3;
}
.wrapper{
position:relative;
height: 100%;
width:100%;
}
#main-content-area{
position:relative;
background-color:white;
margin: -80px auto auto auto;
z-index:4;
border:1px solid red;
}
.halfshadow{
z-index:-1;
top: 0;
width: 100%;
height: 50%;
box-shadow: 1000px 0px 10px rgba(0, 0, 0, 0.5);
}
#footer{
background-color:green;
position:relative;
}
</style>
</head>
<body>
<div class="container-fluid">
<div class="row" id="top-bar">
<div class="col-sm-4">
</div>
<div class="col-sm-4">
</div>
<div class="col-sm-4" >
<h4> Some links </h4>
</div>
</div>
<div class="row">
<div class="col-sm-2">
</div>
<div class="col-sm-4" id="txt-bar"><h1 >Greetings</h1>
</div>
<div class="col-sm-4" id="link-bar">
</div>
<div class="col-sm-2">
</div>
</div>
<div class="row">
<div class="col-sm-12" id="image">
<img src="header.png" class="img-responsive"/>
</div>
</div>
<div class="wrapper">
<div class="line"></div>
<div class="row" >
<div class="col-sm-2">
</div>
<div class="col-sm-8" id="main-content-area">
<div class="col-sm-12" style="background-color:green">
<h3>Welcome </h3>
</div>
<div class="row">
<div class="col-sm-4">
<img src="me.jpg" class="img-responsive"/>
</div>
<div class="col-sm-4">
<img src="me.jpg" class="img-responsive"/>
</div>
<div class="col-sm-4">
<img src="me.jpg" class="img-responsive"/>
</div>
</div>
<div class="row">
<div class="col-sm-4">
<img src="me.jpg" class="img-responsive"/>
</div>
<div class="col-sm-4">
<img src="me.jpg" class="img-responsive"/>
</div>
<div class="col-sm-4">
<img src="me.jpg" class="img-responsive"/>
</div>
</div>
</div>
<div class="halfshadow"></div>
<div class="col-sm-2" >
</div>
</div>
</div>
<div class="row" id="footer">
<div class="col-sm-12">
<div class="col-sm-6">
<h4>some text........</h4>
</div>
<div class="col-sm-6">
< h4>some link </h4>
</div>
</div>
</div>
</div>
</body>
</html>

It won't show. Because box shadow to the div element was empty. I just add some text and margin-top
#top-bar{
background-color:black;
color:white;
}
#txt-bar{
height:40px;
background-color:pink;
position:relative;
z-index:4;
}
#link-bar{
background-color:red;
height:40px;
z-index:4;
}
#image{
position:relative;
z-index:3;
}
.wrapper{
position:relative;
height: 100%;
width:100%;
}
#main-content-area{
position:relative;
background-color:white;
margin: -80px auto auto auto;
z-index:4;
border:1px solid red;
}
.halfshadow{
margin-top:20px;
z-index:-1;
top: 0;
width: 100%;
height: 50%;
box-shadow: 10px 0px 10px rgba(150, 0, 0, 0.5);
}
#footer{
background-color:green;
position:relative;
}
<div class="container-fluid">
<div class="row" id="top-bar">
<div class="col-sm-4">
</div>
<div class="col-sm-4">
</div>
<div class="col-sm-4" >
<h4> Some links </h4>
</div>
</div>
<div class="row">
<div class="col-sm-2">
</div>
<div class="col-sm-4" id="txt-bar"><h1 >Greetings</h1>
</div>
<div class="col-sm-4" id="link-bar">
</div>
<div class="col-sm-2">
</div>
</div>
<div class="row">
<div class="col-sm-12" id="image">
<img src="header.png" class="img-responsive"/>
</div>
</div>
<div class="wrapper">
<div class="line"></div>
<div class="row" >
<div class="col-sm-2">
</div>
<div class="col-sm-8" id="main-content-area">
<div class="col-sm-12" style="background-color:green">
<h3>Welcome </h3>
</div>
<div class="row">
<div class="col-sm-4">
<img src="me.jpg" class="img-responsive"/>
</div>
<div class="col-sm-4">
<img src="me.jpg" class="img-responsive"/>
</div>
<div class="col-sm-4">
<img src="me.jpg" class="img-responsive"/>
</div>
</div>
<div class="row">
<div class="col-sm-4">
<img src="me.jpg" class="img-responsive"/>
</div>
<div class="col-sm-4">
<img src="me.jpg" class="img-responsive"/>
</div>
<div class="col-sm-4">
<img src="me.jpg" class="img-responsive"/>
</div>
</div>
</div>
<div class="halfshadow">Shadow content</div>
<div class="col-sm-2" >
</div>
</div>
</div>
<div class="row" id="footer">
<div class="col-sm-12">
<div class="col-sm-6">
<h4>some text........</h4>
</div>
<div class="col-sm-6">
< h4>some link </h4>
</div>
</div>
</div>
</div>

#main-content-area{
box-shadow: 12px 0 15px -4px rgba(31, 73, 125, 0.8), -12px 0 8px -4px rgba(31, 73, 125, 0.8);
width: 100px;
height: 100px;
margin: 50px;
background: white;
}
or you can go for it also
#main-content-area
{
width: 300px;
height: 100px;
background-color: yellow;
box-shadow: 15px 1px 5px #888888;
}

Explain box shadow for every thing here in my example the values are:
Horizontal Length:1px
Vertical Length:4px
Blur Radius:16px
Spread Radius:15px
The CSS:
box-shadow: 1px 4px 16px 15px rgba(82,43,136,1);

If you want to apply the box-shadow property to your #main-content-area div, you have to basically... add this property into #main-content-area div in your css file.
It will apply the shadow effect on left, right and bottom side:
box-shadow: 0 10px 10px 10px rgba(0, 0, 230, 0.5);
If you want the shadow to appear only on bottom and right side, use:
box-shadow: 10px 10px 10px rgba(0, 0, 230, 0.5);
Codepen: http://codepen.io/anon/pen/VmoNWJ

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#top-bar{
background-color:black;
color:white;
}
#txt-bar{
height:40px;
background-color:pink;
position:relative;
z-index:4;
}
#link-bar{
background-color:red;
height:40px;
z-index:4;
}
#image{
position:relative;
z-index:3;
}
.wrapper{
position:relative;
height: 100%;
width:100%;
}
#main-content-area{
position:relative;
background-color:white;
margin: -80px auto auto auto;
z-index:4;
border:1px solid red;
box-shadow : -10px 0px 10px 0px rgba(0,0,0,0.5),10px 0px 10px 0px rgba(0,0,0,0.5),0px -10px 10px 0px rgba(0,0,0,0.5);
}
.halfshadow{
z-index:-1;
top: 0;
width: 100%;
height: 50%;
box-shadow: 1000px 0px 10px rgba(0, 0, 0, 0.5);
}
#footer{
background-color:green;
position:relative;
}
</style>
</head>
<body>
<div class="container-fluid">
<div class="row" id="top-bar">
<div class="col-sm-4">
</div>
<div class="col-sm-4">
</div>
<div class="col-sm-4" >
<h4> Some links </h4>
</div>
</div>
<div class="row">
<div class="col-sm-2">
</div>
<div class="col-sm-4" id="txt-bar"><h1 >Greetings</h1>
</div>
<div class="col-sm-4" id="link-bar">
</div>
<div class="col-sm-2">
</div>
</div>
<div class="row">
<div class="col-sm-12" id="image">
<img src="header.png" class="img-responsive"/>
</div>
</div>
<div class="wrapper">
<div class="line"></div>
<div class="row" >
<div class="col-sm-2">
</div>
<div class="col-sm-8" id="main-content-area">
<div class="col-sm-12" style="background-color:green">
<h3>Welcome </h3>
</div>
<div class="row">
<div class="col-sm-4">
<img src="me.jpg" class="img-responsive"/>
</div>
<div class="col-sm-4">
<img src="me.jpg" class="img-responsive"/>
</div>
<div class="col-sm-4">
<img src="me.jpg" class="img-responsive"/>
</div>
</div>
<div class="row">
<div class="col-sm-4">
<img src="me.jpg" class="img-responsive"/>
</div>
<div class="col-sm-4">
<img src="me.jpg" class="img-responsive"/>
</div>
<div class="col-sm-4">
<img src="me.jpg" class="img-responsive"/>
</div>
</div>
</div>
<div class="halfshadow"></div>
<div class="col-sm-2" >
</div>
</div>
</div>
<div class="row" id="footer">
<div class="col-sm-12">
<div class="col-sm-6">
<h4>some text........</h4>
</div>
<div class="col-sm-6">
< h4>some link </h4>
</div>
</div>
</div>
</div>
</body>
</html>

Bootstrap col-* not taking full width

I have the following code:
<div class="row row-space">
<div class="row" style="border: 1px solid red;">
<div class="col-lg-6" style="border: 1px solid black;">
<div class="row">
<div>CHILD A</div>
</div>
</div>
<div class="col-lg-6" style="border: 1px solid black;">
<div class="row">
<div>CHILD B</div>
</div>
</div>
</div>
</div>
The problem is, all .row divs take full width of parent outer div (as expected)
but the ones with col-lg-12 or (col-lg-6 + col-lg-6) are not taking the full width.
I am expecting the black boxes to be divided equally inside the red box. I am not applying any other styles to the HTML.

Because their parent is col-lg-6, change to col-lg-12
See more about twitter-bootsrap grid here
UPDATE -based on your updated as well
You have extra unnecessary markup. So see snippet below:
Snippet
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="row row-space" style="border: 1px solid red">
<div class="col-lg-6" style="border: 1px solid black;">
<div>CHILD A</div>
</div>
<div class="col-lg-6" style="border: 1px solid black;">
<div>CHILD B</div>
</div>
</div>

add div container with class "container-fluid" with max-width: 900px;
for example
codepen.io
<div class="container-fluid">
<div class="row row-space">
<div style="border: 1px solid red;" class="row">
<div style="border: 1px solid black;" class="col-lg-6">
<div class="row">
<div>CHILD A</div>
</div>
</div>
<div style="border: 1px solid black;" class="col-lg-6">
<div class="row">
<div>CHILD B</div>
</div>
</div>
</div>
</div>
.container-fluid{
max-width: 900px;
}

How to achieve this following design using twitter bootstrap 3

I am trying to design a responsive page like this
using margin and padding i tried to somehow match the design but failed...
here is the basic sample code i tried...
<div class="container" style="border:1px solid red;">
<div class="container col-lg-6" >
<div class="row col-lg-12" style="border:1px solid brown;">
section1
</div>
<br/>
<div class="row col-lg-12" style="border:1px solid brown;">
section2
</div>
</div>
<div class="container col-lg-6" >
<div class="row col-lg-12" style="border:1px solid blue;">
section3
</div>
</div>
</div>
I need some help.. Thank you..

You can try this.
<div class="row">
<div class="col-xs-8">
<div class="col-xs-12">
<div class="well" style="height: 100px">
</div>
</div>
<div class="col-xs-12">
<div class="well" style="height: 40px">
</div>
</div>
</div>
<div class="col-xs-4">
<div class="well" style="height: 140px">
</div>
</div>
It is just a demo. You can add border, height on your own.

You need to add some negative margins to the left and right of your inner divs. Also, containers within containers is not good practice, and it gets messy on various browser sizes.
http://www.bootply.com/6FWRFHv62f
CSS
.n-margin{margin-left:-30px; margin-right:-30px;}
HTML
<div class="container" style="border:1px solid red;">
<div class="row">
<div class="col-xs-6 n-margin">
<div class="col-xs-12" style="border:1px solid brown;height:200px;">
section1
</div>
<div class="col-xs-12" style="border:1px solid brown;height:60px">
section2
</div>
</div>
<div class="col-xs-6 n-margin pull-right">
<div class="col-xs-12" style="border:1px solid blue;height:260px">
section3
</div>
</div>
</div>