I'm trying to make liquid HTML layout with header (taking all available width and 130px height), 2 columns (1: 300px width all possible height, 2: all available width after column 2 took its 300px and 15-20px margin between them).
Atm I've got this:
HTML:
<div class="wrapper">
<div class="header">
<!-- .... -->
</div>
<div class="content">
<div class="left-column">
<!-- ... -->
</div>
<div class="right-column">
<!-- ... -->
</div>
</div>
</div>
CSS:
html, body {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
min-width: 1000px;
min-height: 500px;
}
body {
font: 12px sans-serif;
background-color: #fff;
color: #000;
}
.wrapper {
height: 100%;
width: 100%;
position: relative;
}
.header {
padding: 0 30px;
height: 100px;
left: 0px;
right: 0px;
position: absolute;
border: 1px solid black;
border-top: none;
}
.content {
position: absolute;
top: 120px;
left: 0;
right: 0;
bottom: 0px;
margin: 10px 20px;
border: 1px solid black;
}
.left-column {
float: left;
width: 300px;
border: 1px solid black;
}
.right-column {
margin-left: 315px;
border: 1px solid black;
}
The question is: are there any better solutions?
Thanks.
I took your HTML and created this fiddle for you: http://jsfiddle.net/RdQJY/1/. I didn't use any of your CSS though - I just don't like positioning used in the way you are using it, so decided to write it from scratch (sorry about that). The lorem ipsum text is just there as a placeholder - if you remove it, you'll see that the divs will occupy the whole window. Hope this helps!
P.S.: the only drawback to my method of having equal-height columns is that there is no easy way to apply a bottom border to them.
Related
I need to achieve something like this:
representation
I have found similar issues but they do not completely cover my task. Here is an example of a thing I have found:
.blue-background {
background-color: blue;
border-radius: 5px;
top: 3em;
left: 230px;
padding: 10px;
font-family: Roboto, sans-serif;
font-size: 14px;
line-height: 22px;
color: #313333;
display: flex;
align-items: center;
width: 260px;
}
.blue-background::after {
content: ' ';
width: 0px;
height: 0px;
border-top: 25px solid transparent;
border-left: 37px solid blue;
border-bottom: 25px solid transparent;
border-right: 0px solid transparent;
position: absolute;
top: 43%;
left: 47%;
}
.child-image-wrapper {
max-width: 260px;
margin: auto;
img {
max-width: 260px;
}
}
<div class="col-md-4 col-xs-12">
<div class="image-block">
<div class="blue-background">
<h2>Some Text <span class="arrow"></span></h2>
</div>
<div class="child-image-wrapper">
<img src="This is an image" />
</div>
</div>
Now the problem with the above CSS is that this works only at particular screen size (like 585px or so) otherwise the arrow "detaches" from the left div and goes into the right div. What I need is for the blue arrow to be stuck to the left div even if the screen size changes. Would it be possible to achieve this in some way? Sorry I am pretty new to front-end design
You can do it like so:
.wrapper {
width: 10em;
height: 2em; /* Height needs to match .right::after height and width */
display: flex;
}
.left {
background-color: lightblue;
width: 50%;
}
.right {
background-color: lightpink;
border-left: 1px solid purple;
width: 50%;
position: relative;
overflow: hidden;
}
.right:before {
height: 2em; /* Match height above*/
width: 2em; /* Match height above*/
background-color: #b77681;
position: absolute;
top: 50%;
left: 0%;
content: "";
border: 1px solid #864954;
transform: translate(-73%, -50%) rotate(45deg);
}
<div class='wrapper'>
<div class='left'>
</div>
<div class='right'>
</div>
</div>
I encourage you to read more about the position property (in our case specifically absolute and relative). here you can find some introduction.
As per your question change the top and left properties in .blue-background::after to fit the position for the arrow as you want.
here is an example: https://jsfiddle.net/qa9un7fy/
I am working on a project that has popup boxes for the user to interact with. I am trying to put 2 blocks of content next to each other in the popup box.
I've been looking around for answers, but none of the common solutions seem to be working here. I've tried float:left, display: inline-block, etc. The only thing that has worked is to set the exact width/heights and apply a margin to the second container, but I'd like to avoid this hack-y solution.
HTML:
<div id="equip-robot-modal" class="modal">
<div id="equip-robot-modal-content" class="modal-content">
<div id="equip-modal-content-inner" class="modal-content-inner">
<div id="robot-info-content">
<header id="equip-header">
<h2 id="equip-header-text">Robot Name Header</h2>
</header>
</div><!-- #robot-info-content -->
<div id="inventory-list-content">
<div id="inventory-list-container">
<p>
put more content here
</p>
</div><!-- #inventory-list-container -->
<div id="auto-match-container">
<button type="button" style="width: 50%; height: 50px; margin-top: 20px;" class="button">
<?php //echo langMatch(
//'PLAYER_SELECTOR_AUTO_MATCH'); ?>
Go to Store
</button>
</div><!-- #auto-match-container -->
</div><!-- #inventory-list-content -->
</div><!-- #equip-modal-content-inner -->
</div><!-- #equip-robot-modal-content -->
CSS:
#robot-info-content {
min-width: 500px;
padding: 10px;
position: relative;
float: left;
background-color: red;
}
#robot-image {
padding: 20px 0;
}
#modal-progress-bars {
min-height: 75%;
}
#inventory-list-content {
min-width: 400px;
padding: 10px;
display: inline-block;
float: left;
background-color: purple;
}
#inventory-list-container {
width: 100%;
height: 430px;
border: 1px solid black;
overflow-y: scroll;
}
.modal-content {
display: inline-block;
position: absolute;
top: 50%;
left: 50%;
min-width: 350px;
height: auto;
transform: translate(-50%, -50%);
background-color: #f7f7f7;
color: black;
border: 2px solid black;
overflow: visible;
}
.modal-content-inner {
margin: 20px 50px;
text-align: center;
}
.modal-content-inner header {
background-color: white;
border: 1px solid black;
padding: 10px 50px;
margin: 0 auto;
}
See the fiddle: https://jsfiddle.net/kqa25wgv/
I'd like to float the 2 content divs within the modal-content inner div. Any suggestions?
Here are some values that worked for me. I stripped out all the superfluous ones:
.modal-content {
width: 800px;}
#robot-info-content {
width: 50%;
float: left;
background-color: red;
}
#inventory-list-content {
width: 50%;
float: left;
background-color: purple;
}
#inventory-list-container {
height: 430px;
border: 1px solid black;
}
.modal-content-inner {
margin: 20px 50px;
text-align: center;
}
.modal-content-inner header {
background-color: white;
border: 1px solid black;
}
You'll notice that I set the width of the .modal-content class to 800px. That's arbitrary and you can change it to what you want (or set it as a percentage of its containing div, if you have one). The important change is to replace your minimum-width settings with width settings, and set them to a percentage. The problem that you have is that your two inner divs are too wide for their container, so the second one wraps to the next line, so to speak.
Of course, if you use padding and/or margins on the inner content divs, you won't be able to set them at 50% without having the same problem.
The other thing that you'll want to experiment with is floating one content div to the left and the other to the right. If you float them both to the left, it won't make a difference so long as they take up the entire width of their container (and no more than the entire width). This can get tricky when you start using static values for your margins and padding, so you'll need to experiment. (You can also use percent values for margins and padding, which can be less tricky.)
I have a custom dialog box which is shown when I click a button. After the dialog box is shown I show a overlay. The height and width of the overlay is 100% x 100%. Here comes the problem, the height 100% just gets the height of the browser window so when I scroll down on the page it remains at the top. How can I set its height to full page height not browser's?
Fiddle.
HTML:
<div id="overlay"></div>
<div class="description" style="text-align: justify;">Some text..(whole big text is in the fiddle didn't wrote here to shorten the code :))</div>
<div style="text-align: right">
<button id="offer_help">Offer Help</button>
</div>
<div class="offer_a_help">
<textarea rows="5">Write a short experience about yourself</textarea>
<textarea rows="5">Write what do you want in return</textarea>
<button id="send_offer">Send Offer</button>
</div>
CSS:
#overlay {
opacity: 0.5;
width: 100%;
height: 100%;
background-color: black;
display: none;
position: absolute;
top: 0;
left: 0;
}
#offer_help {
background-color: #eee;
border: 0;
padding: 10px;
border-radius: 2px;
box-shadow: 0px 0px 3px 1px #aaa;
}
.offer_a_help {
display: none;
width: 400px;
height: 250px;
position: fixed;
top: calc(100%/2 - 350px/2);
left: calc(100%/2 - 250px/2);
background-color: #eee;
border: 1px solid #bbb;
text-align: center;
}
.offer_a_help textarea {
width: 90%;
padding: 2px;
font-family: Calibri;
}
.offer_a_help textarea:first-child {
margin-top: 20px;
}
.offer_a_help button {
float: right;
margin-top: 10px;
margin-right: 10px;
border: 1px solid #bbb;
background-color: #ddd;
padding: 5px;
border-radius: 3px;
}
How can I set its height to full page height not browser's?
position: absolute takes the element out of line with the document. so the height is that of the viewport, and the top,left values are static. Change this to position: fixed and you will see better results.
Use position:fixed.
http://jsfiddle.net/ryJEW/2/
#overlay {
opacity: 0.5;
width: 100%;
height: 100%;
background-color: black;
display: none;
position: fixed;
top: 0;
left: 0;
}
Hi my CSS code is this:
#bottom {
height: 100px;
background-color: #afafaf;
width: auto;
border-top: 4px solid green;
margin-top: 90px;
}
my code is this:
<body>
<div id="wrapper">
<div id="logo"></div>
</div>
<div class="box">Go to our forums ยป </div>
<div id="bottom">TEST</div>
</body>
This is what it looks like: http://screencloud.net/v/cxEu
why does it show those gaps on both ends of the div? I want it to show across the whole screen. I tried different widths, but nothing works. Or I'm doing something wrong !
Looks like the body's margins, try this:
body {
margin: 0;
}
Specify margin: 0 and padding: 0:
#bottom {
height: 100px;
background-color: #afafaf;
width: auto;
border-top: 4px solid green;
margin: 0;
padding: 0;
margin-top: 90px;
}
I just want to make everything in the 'wrapper' stretch out to fit the wrapper, but everything is being annoying and staying a fixed height??
So I wanted the 'sidebar' and the 'inside' of the 'content' area to be the same height all of the time, and i also want the 'content' to stretch to fit the 'wrapper' at all time, while having a 'header', 'nav', and 'footer'. but nothing I try seems to work. I had it at one point but lost the code and forgot what I did.. help? :c
also I was playing around to see what would happen by changing the 'wrapper's min-height, that's why it is so low.
OKAY. to specify: for one, I want the 'wrapper' to encapsulate everything inside of it and always increase its height when one of the children increase their height, like with the 'inside' div is filled with text and increases the height of the 'content'
In addition, I also want the 'sidebar' and 'inside' to keep the same height, aka why they have a height of 100% or top; 0 bottom; 0 w/e i have on here.
Html:
#wrapper {
width: 1000px;
min-height: 300px;
background-color: red;
position: relative;
margin: auto;
margin-bottom: 10px;
border: 1px solid black;
}
#header {
width: 100%;
background-color: blue;
height: 100px;
float: left;
clear: both;
position: relative;
border-bottom: 1px solid black;
}
#content {
width: 100%;
background-color: grey;
height: 100%;
float: left;
clear: both;
position: relative;
}
#sidebar {
width: 180px;
background-color: green;
float: left;
position: absolute;
top: 0px;
bottom: 0px;
padding: 10px;
border-right: 1px solid black;
}
#inside {
width: 779px;
padding: 10px;
position: absolute;
top: 0px;
bottom: 0px;
right: 0px;
background-color: orange;
float: right;
}
#footer {
width: 100%;
height: 100px;
float: left;
clear: both;
background-color: pink;
border-top: 1px solid black;
}
#nav {
width: 100%;
border-bottom: 1px solid black;
float: left;
clear: both;
height: 20px;
background-color: purple;
}
<div id="wrapper">
<div id="header">
hi
</div>
<div id="nav">
hi
</div>
<div id="content">
<div id="sidebar">
sidebar stuff
</div>
<div id="inside">
inside stuff
</div>
</div>
<div id="footer">
hi
</div>
</div>
If I understand, you're looking for same height columns.
Check these two links:
http://css-tricks.com/fluid-width-equal-height-columns/
http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks