I'm having this HTML/CSS code:
.container
{
max-width: 900px;
margin: 0 auto;
margin-top: 30px;
}
.divisions
{
border: 1px solid Black;
}
.Fisrt-Line
{
height: 180px;
}
.First
{
background-color: Green;
width: 32.2%;
}
.Second
{
width: 65%;
background-color: White;
margin-left: 20px;
}
.Second-Line
{
margin-top: 20px;
background-color: Blue;
float: left;
width: 100%;
height: 180px;
}
.Third-Line
{
height: 180px;
width: 31.6%;
float: left;
margin-top: 20px;
}
.Third-2
{
margin-left: 20px;
background-color: Red;
}
.Third-3
{
margin-left: 20px;
}
<html>
<head>
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<link href="Styles/StyleSheet.css" rel="stylesheet" />
</head>
<body class="container">
<div class=" divisions Fisrt-Line First">
1</div>
<div class=" divisions Fisrt-Line Second">
2</div>
<div class="divisions Second-Line">
3
</div>
<div class="divisions Third-Line">
4
</div>
<div class="divisions Third-Line Third-2">
5
</div>
<div class="divisions Third-Line Third-3">
6
</div>
</body>
</html>
When I minimize the browser the second div and also the last div jump to next line. but I don't want that.
How should I edit the code so that those divisions just become smaller not jump to next line?
Do you mind to add additional wrappers for rows? if not please take a look here http://jsfiddle.net/ch0L9fy8/2/
Main update here beside row wrappers:
.divisions-line {
width: 100%;
}
.divisions {
box-sizing: border-box;
border: 1px solid Black;
}
Related
I've tried several things for the project divs..
Ideally i would like them to align in a neat block 3*2 or similar.
div {
text-align: top;
}
#container {
background: #;
width: 960px;
margin-left: auto;
margin-right: auto;
}
#header {
width: 950px;
background: #rgb(187, 203, 231);
align-content: center;
}
/* here I am using type selectors to link it to my HTML document*/
/*A HTML element can only have one ID and a web page can only have one HTML
element with the same ID*/
/*The following is called a box model, which makes reference to putting a
'box' around a HTML element */
#A {
width: 920px;
height: 180px;
padding: 5px;
margin: 5px;
align-content: center;
f
}
/*padding creates whitespace around content within margins and borders*/
#B {
width: 490px;
height: 500px;
padding: 5px;
margin: 5px;
float: right;
}
#C {
width: 410px;
height: 725px;
padding: 5px;
margin: 5px;
}
}
#main {
width: 940px;
background: #E80CC7;
align-content: center;
f
}
/* Flexbox used for project items within the projectandsamplecode container
which is also a "section"*/
#projectsandexamplecode
/*projects are indiviual boxes*/
#projects {
display: grid;
grid-gap: 50px 100px;
background-image: url("../Images/a.jpeg");
}
/* insert flex row*/
#D {
width: 247px;
height: 138px;
border-radius: 5px;
padding: 5px;
}
#E {
width: 247px;
height: 138px;
border-radius: 5px;
padding: 5px;
}
#F {
width: 247px;
height: 138px;
border-radius: 5px;
padding: 5px;
}
#G {
width: 247px;
height: 138px;
border-radius: 5px;
padding: 5px;
}
#H {
width: 247px;
height: 138px;
border-radius: 5px;
padding: 5px;
}
#I {
width: 247px;
height: 138px;
border-radius: 5px;
padding: 5px;
}
#socialmedia {
justify-content: left;
background: #40FF40;
width: 200px;
height: 100px;
}
#l {
float: left;
background: #40FF40;
}
#m {
float: left;
background: #40FF40;
}
#n {
float: left;
background: #40FF40;
}
#o {
float: left;
background: #40FF40;
}
#p {
float: left;
background: #40FF40;
}
#footer {
background: #A005FF;
}
<!DOCTYPE HTML>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="css1.css">
</head>
<body>
<!-- this is my div section in a comment web html of basic a,b,c structure to box elements-->
<div id="container">
<div id="header">
<div id="A"> <img id="headerpic" src="images/download.jpeg" ; width: "940"; height: "150"x;></div>
<div id="B"><img src="images/computopia.jpg" width="280" ; height="400"></div>
<div id="C">Site description History and background"
<p><cite>"Bad programmers worry about the code. Good programmers worry about data structures and their relationships"-Linus Trovalds</cite></p>
</div>
<a href="page2.html" CV</a>
</div>
<div id="Projects and example code">
<div id="projects">
<div id="D">
<Project 1>Project 1</div>
<div id="E">
<Project 2>Project 2</div>
<div id="F">
<Project 3>Project 3</div>
<div id="G">
<Project 4>Project4</div>
<div id="H">
<Project 5>Project 5</div>
<div id="H">
<Project 6>Project 6</div>
</div>
</div>
<div=id="socialmedia" social media>
<div id="l">Facbook</div>
<div id="m"><a href="https://www.linkedin.com/in/chris-hudson-23a37118/"> Linkedin</div>
<div id="n">Stackoverflow</div>
<div id="o">GIT-Hub</div>
<div id="p"><a href = secondwebpage.html></a>CV</div>
</div>
<div id="footer">
</div>
</div>
</body>
</html>
This question already has answers here:
Make a div span two rows in a grid
(2 answers)
Closed 2 years ago.
I drew this in microsoft paint and wanted to make this in html/css
The numbers labeled are the box numbers
This is what I've done to try to achieve this
html file
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset="utf-8">
<title>test</title>
<link rel="stylesheet" type="text/css" href="box.css">
</head>
<body>
<div id="box1"></div>
<div id="box2"></div>
<div id="box3">
<div id="box4"></div>
<div id="box5"></div>
<div id="box6"></div>
<div id="box7"></div>
<div id="box8"></div>
</div>
</body>
</html>
css file
html, body {
margin: 0px;
height: 100%;
width: 100%;
}
#box1 {
border: solid black 3px;
height: 10%;
}
#box2 {
border: solid black 3px;
height: 3%;
}
#box3 {
border: solid black 3px;
height: 84%;
}
#box4 {
border: solid black 1px;
width: 50%;
height: 95%;
float: left;
margin: 5px;
}
#box5 {
border: solid black 1px;
width: 23%;
height: 25%;
float:left;
margin-left: 10px;
margin-top: 6px;
}
#box6 {
border: solid black 1px;
width: 23%;
height: 30%;
float:left;
margin-top: 10px;
margin-left: 10px;
}
#box7 {
border: solid black 1px;
width: 23%;
height: 30%;
float:left;
margin-top: 10px;
margin-left: 10px;
}
How it looks
I couldn't get box8 to show up on the right side I tried float right it messes it up. Also the boxes inside box3 are all inconsistent. If I full screen the boxes go right side. I used percentages for responsiveness but it didn't work. Anyone know how to do this ?
This can be achieved with flexbox - but note that you will need to use wrapper divs and apply different flex-directions to each in order to make the grid layout work.
body, html {
height: 100%;
width: 100%;
overflow: hidden;
}
.box-wrapper {
height: 100vh;
width: 100vw;
display: flex;
flex-direction: column;
}
#box1 {
padding:10px;
height:30px;
line-height:30px;
border: solid 1px red
}
#box2 {
height: 15px;
padding: 8px;
border: solid 1px blue
}
#box3 {
padding: 10px;
flex-grow:1;
display: flex;
flex-direction: row;
border: solid 1px green
}
#box4 {
flex-grow:2;
border: solid 1px orange
}
.middle-column {
flex-grow:1;
display: flex;
flex-direction: column;
}
.middle-column div{
flex-grow:1;
margin: 0 8px;
border: solid 1px #6e6e6e;
}
.middle-column div + div {
margin-top: 8px
}
#box8 {
flex-grow:1;
border: solid 1px black
}
<div class="box-wrapper">
<div id="box1">1</div>
<div id="box2">2</div>
<div id="box3">
<div id="box4">4</div>
<div class="middle-column">
<div id="box5">5</div>
<div id="box6">6</div>
<div id="box7">7</div>
</div>
<div id="box8">8</div>
</div>
</div
I have a header with an image and an "hamburger" icon for a mobile navigation menu. What I am simply trying to do it display my logo at approx 75% of the available screen with the menu icon to the far right.
I have a master div container and then within it i have 2 divs which has the logo in the left div and menu icon in the right. For some reason I cannot get the menu to stay on the right in the same div container. Any suggestions?
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style>
#container {
width: 100%;
max-width: 100%;
border: 0px;
margin: 0px;
padding: 10px;
background-color: blue;
}
#logoContainer {
width: 75%;
max-width: 75%;
border: 0px;
margin: 0px;
background-color: blue;
}
#logo {
width: auto;
max-width: 90%;
min-width: 90%;
}
#menu {
float: right;
}
#mobileMenu {
width: 100%;
background-color: green;
color: white;
display: none;
}
</style>
</head>
<body>
<div id="container">
<div id="logoContainer">
<img id="logo" src="content/logo.png"/>
</div>
<div id="menu">
<button type="button"><span>Menu</span></button>
</div>
</div>
<div id="mobileMenu">some content</div>
</body>
</html>
give specific width to both #logoContainer and #menu with display:inline-block;
#logoContainer{
width:75%;
display:inline-block;
}
#menu{
width:25%;
display:inline-block;
text-align: right;
}
#menu button{
margin-right:10px
}
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
#container {
width: 100%;
max-width: 100%;
border: 0px;
margin: 0px;
padding: 10px;
background-color: blue;
}
#logoContainer {
width: 75%;
max-width: 75%;
border: 0px;
margin: 0px;
background-color: blue;
}
#logo {
width: auto;
max-width: 90%;
min-width: 90%;
}
#menu{
float: right;
}
#mobileMenu {
width: 100%;
background-color: green;
color: white;
display: none;
}
</style>
</head>
<body>
<div id="container">
<div id="logoContainer">
<img id="logo" src="content/logo.png" />
</div>
<div id="menu">
<button type="button">
<span>
Menu
</span>
</button>
</div>
</div>
<div id="mobileMenu">
some content
</div>
</body>
</html>
How about using media queries to make the logo appear. With my example, I've set the display on #logo to "none" . With my media query, whenever the page reaches a min-width of 800px it will display the #logo element.
<div id="container">
<div id="logoContainer">
<img id="logo" src="content/logo.png" />
</div>
<div id="menu">
<button type="button">
<span>
Menu
</span>
</button>
</div>
</div>
<div id="mobileMenu">
some content
#container {
width: 100%;
max-width: 100%;
border: 0px;
margin: 0px;
padding: 10px;
background-color: blue;
}
#logoContainer {
width: 75%;
max-width: 75%;
border: 0px;
margin: 0px;
background-color: blue;
}
#logo {
display:none;
width: auto;
max-width: 90%;
}
#menu{
float: right;
}
#mobileMenu {
width: 100%;
background-color: green;
color: black;
display: none;
}
#media (min-width:800px){
#logo{display:block;}
}
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
body{
margin: 0px;
}
#container {
box-sizing: border-box;
width: 100%;
max-width: 100%;
border: 0px;
margin: 0px;
padding: 10px;
background-color: red;
}
#logoContainer {
float: left;
width: 75%;
max-width: 75%;
border: 0px;
margin: 0px;
background-color: blue;
}
#logo{
max-width: 75%;
border: 0px;
margin: 0px;
}
#menu{
height: 10px;
width: 25%;
float: right;
background: yellow;
}
#mybtn{
float: right;
}
#mobileMenu {
display: inline;
background-color: green;
color: white;
}
</style>
</head>
<body>
<div id="container">
<div id="menu">
<button type="button" id="mybtn">
<span>
Menu
</span>
</button>
<div id="mobileMenu">
some content
</div>
</div>
<div id="logoContainer">
<img id="logo" src="content/logo.png" />
</div>
</div>
</body>
</html>
I have a problem with 5 floating divs, here is a picture:
You will see.. the green div should be on the left side from the red div(instead of the empty place) and the violet div on the place from the green div.
The html order from the divs is: blue, red, orange, green and violet, I think this is the reason for this white, empty space, because the green and the violet div comes in the html after! the red div, is this right?
What can i do, to fix this problem, anyone have an idea? I set the margin-top of the violet to -300px but I think this not a clean solution and than would be the order(html structure) false.
Here is my full html:
<!DOCTYPE html>
<html>
<head>
<title>ResponsiveExample</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="layout.css">
<script src="js/libs/jquery/jquery.js"></script>
</head>
<body>
<div class="page-wrapper">
<header>
<div class="header">
</div>
<div class="below-header"></div>
</header>
<div class="main-content">
<div class="blue-box"></div>
<div class="red-box"></div>
<div class="orange-box"></div>
<div class="green-box"></div>
<div class="violet-box"></div>
</div>
<footer>
</footer>
</div>
</body>
</html>
And here is my CSS:
*, *:before, *:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body
{
margin: 0;
padding: 0;
}
.header{
position: fixed;
height: 50px;
width: 100%;
background-color: grey;
}
.below-header{
height: 50px;
width: 100%;
}
.blue-box{
height: 300px;
background-color: blue;
}
.red-box{
height: 600px;
background-color: red;
}
.orange-box{
height: 300px;
background-color: orange;
}
.green-box{
height: 300px;
background-color: greenyellow;
}
.violet-box{
height: 300px;
background-color: violet;
}
#media only screen and (min-width: 28.125em) {
.blue-box{
float: left;
width: 50%;
}
.red-box
{
float: left;
width: 100%;
}
.orange-box{
float: left;
width: 50%;
}
.green-box{
float: left;
width: 50%;
}
#media only screen and (min-width: 71.875em){
.blue-box{
width: 33%;
border: 5px solid black;
}
.red-box{
width: 33%;
border: 5px solid black;
}
.orange-box{
width: 33%;
border: 5px solid black;
clear: right;
}
.green-box{
width: 33%;
border: 5px solid black;
clear: right;
}
.violet-box{
width: 33%;
//margin-top: -300px;
border: 5px solid black;
float: left;
}
}
}
I would be very grateful for every help that I get!
Try this:
<div class="main-content">
<div id="left">
<div class="blue-box"></div>
<div class="green-box"></div>
</div>
<div id="center">
<div class="red-box"></div>
</div>
<div id="right">
<div class="orange-box"></div>
<div class="purple-box"></div>
</div>
</div>
Then apply CSS styles to your liking.
I need the #infoBar div and the #actualCover div to sit to the right of (next to) the #covers div, but for some reason, the covers div is acting like it's not even there and floats on top of the other divs.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Page</title>
<style type="text/css">
*
{
margin: 0;
padding: 0;
}
#chooserContainer
{
border: solid 1px orange;
}
#coverArea
{
border: solid 1px red;
width: 760px;
}
#covers
{
width: 150px;
float: left;
height: 600px;
overflow-y: auto;
overflow-x: hidden;
border: solid 2px #BFDEFF;
padding: 10px;
background-color: #F0F7FF;
margin-right: 30px;
}
#infoBar
{
height: 30px;
border: solid 1px green;
width: 600px;
}
#actualCover
{
width: 794px;
height: 1123px;
background-position: top left;
}
</style>
</head>
<body>
<div id="chooserContainer">
<div id="covers">
</div>
<div id="infoBar">
</div>
<div id="coverArea">
<div id="actualCover">
</div>
</div>
<div style="clear: both;"></div>
</div>
</body>
</html>
Here you go.
As a good practice, get your layout correct first before you set padding and margins.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Page</title>
<style type="text/css">
*
{
margin: 0;
padding: 0;
}
#chooserContainer
{
background: #ccc;
width: 911px;
}
#covers
{
width: 150px;
float: left;
height: 600px;
overflow-y: auto;
overflow-x: hidden;
background-color: #0ff;
}
#infoBar
{
height: 30px;
width: 600px;
float: right;
background: yellow;
}
#coverArea
{
width: 760px;
float: right;
background: #f60;
}
#actualCover
{
width: 794px;
height: 600px;
}
</style>
</head>
<body>
<div id="chooserContainer">
<div id="covers">Coveres
</div>
<div id="infoBar">InfoBar
</div>
<div id="coverArea">CoverArea
<div id="actualCover">ActualCover
</div>
</div>
<div style="clear: both;"></div>
</div>
</body>
</html>
In this case, it sounds like you want #infoBar and #coverArea to float to the right of #covers instead of #covers floating to the left of the other two.
Try taking the float off of #covers and adding float: right; to #infoBar and #coverArea