I tried to build a website with a Special landingpage. Design specific i`d like to build it like that.
To do this I wrote the following code:
<body>
<div id="wrapper">
<div id="header_section">
</div>
<div id="main_section">
<div id="menu_section">
<div class="first_row">
<div class="row_element_4 first_element_row"></div>
<div class="row_element_4"></div>
<div class="row_element_4"></div>
<div class="row_element_4"></div>
</div>
<div class="second_row">
<div class="row_element_4 first_element_row"></div>
<div class="row_element_4"></div>
<div class="row_element_4"></div>
<div class="row_element_4"></div>
</div>
</div>
</div>
<div id="footer_section">
</div>
</div>
And CSS:
/* Main Section */
#main_section
{
background: url("../images/background/bg_person.jpg");
width: 100%;
height: 70%;
background-repeat: no-repeat;
background-size: cover;
overflow: hidden;
}
#menu_section
{
margin: 0 auto;
width: 95%;
margin-top: 1%;
height: 95%;
background: blue;
}
.first_row
{
background: red;
width: 100%;
height: 49%;
}
.second_row
{
background: orange;
width: 100%;
height: 49%;
margin-top: 1%;
}
.row_element_4
{
height: 100%;
width: 24%;
background: aqua;
float: left;
margin-left: 1%;
}
.first_element_row
{
margin-left: 0.5%;
}
My Problem is the responsive Design when I resize the window as shown in the Image below:
My row elements don't look like a square anymore.
How can I fix this Problem with my design staying responsive?
Use position: relative;
Check it here http://www.w3schools.com/cssref/pr_class_position.asp
I think you'll find useful vw and vh units. Define width and height are equal 95vw and you'll get ideal square
#menu_section
{
margin: 0 auto;
width: 95vw;
margin-top: 1%;
height: 95vw;
background: blue;
}
BTW, here's a doubled margin-top definition
Related
I am trying to split the screen horizontally into 3 equal pieces so I can place separate images into each piece. I have split the screen somewhat equally, but I am running into some issues with a white space and not being split equally.
Here is what I have:
HTML:
<div class="split left">
<div class="centered">
<img src="img_avatar2.png" alt="Avatar woman">
</div>
</div>
<div class="split center">
<div class="centered">
<img src="img_avatar.png" alt="Avatar man">
</div>
</div>
<div class="split right">
<div class="centered">
<img src="golf_course.jpg" alt="Finished Terrain Golf Course">
</div>
</div>
CSS:
/* Split the screen into thirds*/
.split {
height: 100%;
width: 33.3333%;
position: fixed;
z-index: 1;
top: 0;
overflow-x: hidden;
padding-top: 20px;
}
/* Control the left side */
.left {
left: 0;
background-color: #111;
}
/* Control the right side */
.right {
right: 0;
background-color: red;
}
.center {
right:auto;
left:auto;
background-color:wheat;
}
/* If you want the content centered horizontally and vertically */
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
/* Style the image inside the centered container, if needed */
.centered img {
width: 150px;
border-radius: 50%;
}
Image:
You can use flexbox:
.container {
display: flex;
justify-content: space-between;
}
.container div {
width: 100%;
padding: 5px;
border: 1px solid black;
}
<div class="container">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
You can use grid :
https://css-tricks.com/snippets/css/complete-guide-grid/
in grid you can divide your grid.
*doesn"t work with older browsers like ie11
First, width: available is not valid property. if you want to use all available space you should set width: 100%. anyway, for solving your issue you should use height: 100% also for body and html. see this example:
body, html {
width: 100%;
height: 100%;
margin: 0;
}
.container {
width: 100%;
height: 100%;
}
.leftpane {
width: 33%;
height: 100%;
float: left;
background-color: rosybrown;
border-collapse: collapse;
}
.middlepane {
width: 33%;
height: 100%;
float: left;
background-color: royalblue;
border-collapse: collapse;
}
.rightpane {
width: 33%;
height: 100%;
position: relative;
float: right;
background-color: yellow;
border-collapse: collapse;
}
<div class="container">
<div class="leftpane">
<h1>Test Page</h1></div>
<div class="middlepane">Test Page</div>
<div class="rightpane">
<h1>Test Page</h1></div>
</div>
For a project I have a page where everything is in a wrapper and I scale that wrapper as the screen size gets bigger. Imagine each box being a section.
The middle section bleeds to the right but keeps the same margin to the left as the wrapper does. I don't know the exact width of the the section + the margin on the right and if I do, when it scales it will change. I want the left side to scale inline with the other sections as the browser changes like it does in a regular wrapper.
https://codepen.io/seandaniel/pen/oNvKjop
.wrapper {
width: 60rem;
margin: 0 auto;
}
.section-1 {
background-color: black;
width: 100%;
height: 200px;
}
.section-2 {
background-color: blue;
/* this width is just to show what I want it to look like */
width: 1224px;
height: 200px;
margin-left: auto;
}
.section-3 {
background-color: orange;
width: 100%;
height: 200px;
}
<main>
<div class="wrapper">
<section class="section-1">
</section>
</div>
<section class="section-2">
</section>
<div class="wrapper">
<section class="section-3">
</section>
</div>
</main>
Is this what you want to happen?
The wrapper will stay the same distance from the left no matter what.
Although I'm not sure if you want your wrapper in the center center (x,y) at all times.
CSS
.wrapper {
border: 1px solid green;
width: 100%;
position: absolute;
left: 45px;
}
.section-1 {
background-color: black;
width: 100%;
height: 200px;
position: relative;
}
.section-2 {
background-color: blue;
width: 125%;
height: 200px;
margin-left: auto;
position: relative;
}
.section-3 {
background-color: orange;
width: 100%;
height: 200px;
position: relative;
}
<main>
<div class="wrapper">
<section class="section-1">
</section>
<section class="section-2">
</section>
<section class="section-3">
</section>
</div>
</main>
In your .section-2 class add the following css rule margin-right: calc(50% - 50vw);
You will also need to nest your <section class="section-2"></section> into the same <div class="wrapper"></div> as your other sections to have the same left alignment.
If you want it to bleed to the left, use margin-left: calc(50% - 50vw); instead of margin-right, or have both to be full width.
This page has a lot of good information about manipulating margins within a container.
Full Width Containers in Limited Width Parents
.wrapper {
width: 60rem;
margin: 0 auto;
}
.section-1 {
background-color: black;
width: 100%;
height: 200px;
}
.section-2 {
background-color: blue;
height: 200px;
margin-right: calc(50% - 50vw);
}
.section-3 {
background-color: orange;
width: 100%;
height: 200px;
}
<main>
<div class="wrapper">
<section class="section-1">
</section>
</div>
<div class="wrapper">
<section class="section-2">
</section>
</div>
<div class="wrapper">
<section class="section-3">
</section>
</div>
</main>
I'm trying to add a sidebar with a fixed width. But the content div should be fluid.
Here is my code:
.page-main{
padding: 10px;
height: auto;
overflow: hidden;
}
.page-content{
background-color: red;
width: auto;
overflow: hidden;
}
.page-side {
float: right;
width: 200px;
background-color: green;
}
<div class="page-main">
<div class="page-content">
Content
</div>
<div class="page-side">
Sidebar
</div>
</div>
I hope someone can help.
Just move .page-side before .page-content in your html
.page-main{
padding: 10px;
height: auto;
overflow: hidden;
}
.page-content{
background-color: red;
width: auto;
overflow: hidden;
}
.page-side {
float: right;
width: 200px;
background-color: green;
}
<div class="page-main">
<div class="page-side">
Sidebar
</div>
<div class="page-content">
Content
</div>
</div>
1.you can use css expression
.page-content {width: calc(100% - 200px);float:left}
2.or you can set the sidebar to absolute,and add margin-right for page-content
.page-side {
width: 200px;
background-color: green;
position: absolute;
right: 20px;
top: 18px;
}
.page-content {
background-color: red;
width: auto;
overflow: hidden;
margin-right: 200px;
}
You can use negative margin.
HTML:
<div class="wrapper">
<div class="content">
</div><!-- .content -->
<div class="sidebar">
</div><!-- .sidebar -->
</div><!-- .wrapper -->
CSS:
.wrapper{
margin-right: 300px;
}
.content{
width: 100%;
float: left;
}
.sidebar{
float: right;
width: 300px;
margin-right: 300px;
}
full explanation and example for 2-3 columns layout:
https://shellcreeper.com/responsive-fixed-width-sidebar-why-and-how/
not sure whether you want to your sidebar width to exact 200px you can assign width in percentage too... i hope this helps
<div class="page-main">
<div class="page-content">
Content
</div>
<div class="page-side">
Sidebar
</div>
</div>
.page-main{
padding: 10px;
height: auto;
overflow: hidden;
}
.page-content{
background-color: red;
width: auto;
overflow: hidden;
float:left;
width: 61%;
}
.page-side {
float: right;
width: 200px;
background-color: green;
}
OR check this out: https://jsfiddle.net/pjx6wqrw/3/
{edited to remove jsfiddle link from the code block}
What i want is to make this divisions using Bootstrap and AngularJS
What i don't know how to do is to make the divisions, i was thinking to split the container in 3 columns of 4. Also want to know if can i split the container in two columns of 6 and overlap another div to make the SECTOR 3?
This is what i said before, but this doesn't give me what i want.
<div class="container" contenteditable="false">
<div class="col-md-6 text-center">
<button class="btn btn-default">Button</button>
</div>
<div class="col-md-6 text-center">
<button class="btn btn-default">Button</button>
</div>
</div>
EDIT 1
Also would like to know how to get this responsiveness when loading the site on a smartphone.
Plunker
HTML:
<div class="container">
<div class="content">
<div class="content-body">
<div class="section1 pull-left">section 1</div>
<div class="section2 pull-right">section 2</div>
<div class="section3">section 3</div>
</div>
</div>
</div>
CSS:
/* Reset */
html, body { height: 100%; margin: 0; padding: 0; }
.container {
display: table;
width: 100%;
height: 100%;
}
.content {
display: table-row;
height: 100%;
}
.content-body {
display: table-cell;
}
.section1 {
width: 50%;
background: red;
height: 100%;
display:block;
}
.section2 {
width: 50%;
height: 50%;
height: 100%;
display: block;
background: blue;
}
.section3 {
position: absolute;
left: 0;
right: 0;
bottom: 0;
margin: 0 auto;
height: 50%;
width: 50%;
background: yellow;
}
For responsive style changes you need to add a media query:
#media (max-width: 768px) {
.section3, .section2, .section1 {
display:block;
position: relative;
}
.section3 {
height: 10%;
width: 100%
}
.section2 {
height:60%;
width: 100%
}
.section1 {
height: 30%;
width: 100%
}
}
I get that there are many questions and answers regarding laying out a page using DIV's and CSS but none are helping me get close to the layout I am looking for.
I am trying to stop my habit of laying out a page using tables (its rare I do page layout and old habits die hard).
The layout I am looking for (on a black page) is:
I want this to remain in the centre of the page if the screen displays anything more than 800px wide
The HTML I have so far is:
<body>
<form id="form1" runat="server">
<div id="header">Header</div>
<div id="outerleftcolumn">Left Column</div>
<div id="leftcolumn">Left Column</div>
<div id="content">Content</div>
<div id="outerrightcolumn">Left Column</div>
<div id="footer">Footer</div>
</form>
</body>
The CSS I have so far:
body {
margin: 0px;
padding: 0px;
background-color:black;
}
#header {
background: #438a48;
width: 770px;
height:50px;
}
#outerleftcolumn {
background-image:url(/Templates/Red/Images/LeftBoarder.jpg);
float: left;
width: 15px;
height: 700px;
}
#leftcolumn {
background: #2675a8;
float: left;
width: 150px;
height: 700px;
}
#outerrightcolumn
{
background-image: url(/Templates/Red/Images/RightBoarder.jpg);
float: right;
width: 15px;
height: 700px;
}
#content {
background: #ff6a00;
float: left;
width: 635px;
height: 700px;
}
#footer {
background: #df781c;
clear: both;
width: 800px;
}
I keep reading an article or post and think I know what I have to do only to change one setting and the whole thing goes loopy laa laa. I could achieve this using tables in a heartbeat but as I say I am trying (and failing) to drop my bad habits. The images in the two outside div are just jpg's with gradients.
Any pointer would be appreciated.
body {
margin: 0px;
padding: 0px;
background-color:#000;
}
#outerleftcolumn {
float: left;
width: 15px;
height: 700px;
background-color: red;
}
#outerrightcolumn
{
background-image: url(/Templates/Red/Images/RightBoarder.jpg);
float: right;
width: 15px;
height: 700px;
background-color: red;
}
#centercolumn{
overflow: hidden;
}
form{
display: block;
margin: auto;
width: 800px;
background-color: #000;
}
#header {
background: #438a48;
width: 770px;
height:50px;
}
#leftcolumn {
background: #2675a8;
float: left;
width: 150px;
height: 620px;
}
#content {
background: #fff;
float: left;
width: 620px;
height: 620px;
}
#anotherheader{
float: left;
width: 100%;
height: 50px;
background-color: yellow;
}
#footer {
background: #df781c;
height: 30px;
width: 800px;
float: left;
}
<body>
<form id="form1" runat="server">
<div id="outerleftcolumn">Left Column</div>
<div id="outerrightcolumn">Left Column</div>
<div id="centercolumn">
<div id="header">Header</div>
<div id="leftcolumn">Left Column</div>
<div id="content">
<div id="anotherheader">
</div>
</div>
<div id="footer">Footer</div>
</div>
</form>
</body>
I tweak a little bit your code, getting rid of the outter columns:
HTML:
<body>
<form id="form1" runat="server">
<div id="header">Header</div>
<div id="leftcolumn">Left Column</div>
<div id="content">Content</div>
<div id="footer">Footer</div>
</form>
</body>
CSS:
body {
margin: 0px;
padding: 0px;
background-color:red;
width: 800px;
}
#header {
background: #438a48;
width: 770px;
height:50px;
margin: 0px 15px;
}
#leftcolumn {
background: #2675a8;
float: left;
width: 150px;
height: 700px;
margin-left: 15px;
}
#content {
background: #ff6a00;
float: left;
width: 620px;
height: 700px;
margin-right: 15px;
}
#footer {
background: lightblue;
clear: both;
width: 770px;
margin: 0px 15px;
}
Here is a fiddle: http://jsfiddle.net/v81wdmgp/