I am trying to create a layout like this:
this is what I have so far:
HTML
<div id="wrapper">
<div id="top">
<div id="top">100% width and 45px height </div>
</div>
<div id="middle">
<div id="middleleft">Middle Left 20%</div>
<div id="middlecenter">Center 60%</div>
<div id="middleright">Middle Right 20%</div>
</div>
<div id="bottom">
<div id="bottom">100% width and 30% height</div>
</div>
CSS
#top{
width:???;
height: 45px;
}
#bottom {
width: ???;
height: 30%;
}
http://jsfiddle.net/Jn6x6/
But I cannot make the top and buttom take the 100%.
Is this the right approach or should I try something different?
Thanks.
Add
#wrapper #middle {
display:table;
width: 100%;
height: 100%;
}
to the CSS of your JsFiddle.
See http://jsfiddle.net/Jn6x6/1/
Does
#top,
#bottom {
width: 100%;
}
Not do what you need?
At
< div id="top">
< div id="top">100% width and 45px height < /div>
< /div>
try to give the 2nd id the name "top_box" and give the 1st id (#top) a width of 100% and the 2nd one (#top_box) a width of inherit
Also, try testing your HTML code in a newly created HTML file (example.html) and open it in a browser.
Related
I want to display it like this:
.
However the container wont center / cover the entire screen for the other columns to be side by side (I left out the left/right column in css, because I'm trying to find out how to make it work + the container just defaults to the top left of the screen.) Also how do I get them side by side like the layout, inside the entire screen container?
#container {
text-align: center;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.title {
color: #eee;
font-size: 30px;
font-weight: bold;
letter-spacing: 4px;
}
<div class="container">
<div id="leftColumn">
<div class="center">
<h1 class="title">requiem.moe</h1>
<div id="center_wrap">
<div id="yt">
> youtube <
</div>
<div id="steam">
> steam <
</div>
<div id="hub">
> old theme+hub <
</div>
<div id="sharex">
> New ShareX Server <
</div>
<div id="tracks">
tracklist N/A
</div>
<div id="user">
user system N/A
</div>
<div id="aura">
aura sys TBA
</div>
</div>
<div id="rightColumn">
test
</div>
</div>
</div>
</div>
You put the rightColumn inside the leftColumn.
I recommend you using FlexBox. This is modern and most wanted.
* {
padding: 0;
margin: 0;
box-sizing: border-box
}
.container {
width: 100vw;
height: 100vh;
display: flex;
border: 2px solid black
}
.container #leftColumn {
width: 25%;
height: 100%;
background-color: green;
}
.container #rightColumn {
width: 75%;
height: 100%;
background-color: red
}
<div class="container">
<div id="leftColumn">
<div class="center">
<h1 class="title">requiem.moe</h1>
<div id="center_wrap">
<div id="yt">
> youtube <
</div>
<div id="steam">
> steam <
</div>
<div id="hub">
> old theme+hub <
</div>
<div id="sharex">
> New ShareX Server <
</div>
<div id="tracks">
tracklist N/A
</div>
<div id="user">
user system N/A
</div>
<div id="aura">
aura sys TBA
</div>
</div>
</div>
</div>
<div id="rightColumn">
test
</div>
</div>
assign display:flex; flex-direction: row; to your container class. they will cause the left column and right column display in a row.
Don't position your container at all. You even don't need your container. The body element of your html could be the container, but if you do want a container, you could add something like margin: auto (this will center anything relative to its parent element) and height: 100% with width: 100%.
Then, your left column could be something like display: block with width: 30% and your right column display: block with width 70%.
I would consider using a CSS grid layout for this though.
One thing you might find helpful is starting with something like TailwindCSS classes instead of writing your own CSS. It's a good way to learn the underlying CSS as well. For instance, here are the docs for height: 100%.
You can get started with Tailwind by simply including a link to their CND version of the Tailwind stylesheet in the head of your HTML document:
<link href="https://unpkg.com/tailwindcss#^2/dist/tailwind.min.css" rel="stylesheet">
Use that as your "stylesheet reset" and start playing around with Tailwind layout properties and I think you'll have a better entry point into learning more complex CSS layout.
here is how to split to 2 parts:
.split {top:0; height:100%; position:absolute;}
.left {width:20%; left:0; background-color:purple;}
.right {width:80%; right:0; background-color:green;}
<div class="split left">
<p>something</p>
</div>
<div class="split right">
<p>something</p>
</div>
To split, you need to write 20% for the left part, and 80% to the right part (as you can see in the CSS).
both of the divs need to have full height (as you can see in the CSS).
I'd like my div to be 175px width if the text inside is shorter than this value or to take 100% of cointainer width if the text is bigger than 175px. How can I achieve this?
So far I tried to play with width, min-width and max-width but can figure it out.
.text-div {
min-width: 175px;
max-width: 100%;
border: dotted 2px;
}
<div id="container">
<div class="text-div">
Short Text
</div>
<div class="text-div">
Loooooooooooooog Text
</div>
</div>
A hacky approximation using clamp(). You need an extra wrapper that has a shrink-to-fit behavior (I used float but you can consider inline-block). 100% of the child width will refer to its own width since its parent is shrink-to-fit.
I use clamp and compare 100% with 175px.
If 100% > 175px we have (100% - 175px)*10000 a big positive value clamped to 100vw, your full width behavior (we have to hide the overflow)
If 100% < 175px we have (100% - 175px)*10000 a big negative value clamped to 175px
#container {
overflow:hidden;
}
.text-div {
width: clamp(175px, (100% - 175px)*10000, 100vw);
background:yellow;
margin:5px;
}
.wrap {
float: left;
clear: left;
}
<div id="container">
<div class="wrap">
<div class="text-div">
Short Text
</div>
</div>
<div class="wrap">
<div class="text-div">
Looooooooooooooooooooooooooong Text
</div>
</div>
</div>
Here is how you could achieve the desired result by adding some Javascript.
document.querySelectorAll('.text-div').forEach( div => {
if(div.clientWidth > 175){
div.classList.add('long-text');
}else{
div.classList.add('short-text');
}
})
.text-div {
display: table;
border: dotted 2px;
}
.short-text{
width: 175px;
}
.long-text{
width: 100%
}
<div id="container">
<div class="text-div">
Short Text
</div>
<div class="text-div">
Looooooooooooooooooooooooong Text
</div>
</div>
Right now I have a div that I need to have over 100vw in width in order to get the effect I want. What I don't want is for the div to go off the right side of the screen. I want the view to stay at 100vw, no horizontal scroll bar. I have tried overflow: hidden; and overflow-x:hidden; and it is not working.
CSS
.stripe {
height: 500px;
width: 150vw;
top: 350px;
margin-left: -30vw;
position: absolute;
background-color: #4775de;
transform: rotate(6.2deg);
z-index: -1;
}
HTML
<div styleName='hero'>
<div>
<div styleName="stripe"/>
</div>
<div className="container" styleName="divide-container">
<div styleName="upper-wrapper" >
</div>
<div styleName="lower-wrapper" >
<MainButtonRow/>
</div>
</div>
</div>
Assuming .hero has no padding or margin, give the parent div of .stripe width:100% (or 100vw) and overflow-x: hidden.
You can try to add another div for wrapping the stripe div. and give overflow:hidden. please refer below code.
css
.wrap{position:relative;
width:100%;
height:500px;
overflow:hidden;
}
HTML
<div styleName='hero'>
<div className="wrap>
<div styleName="stripe"/>
</div>
<div className="container" styleName="divide-container">
<div styleName="upper-wrapper" >
</div>
<div styleName="lower-wrapper" >
<MainButtonRow/>
</div>
</div>
</div>
Hiding the overflow in the body tag worked for me when I had this issue.
body {
overflow-x: hidden;
}
I hope that someone can help me about this problem. I have structure like this
<div id="Div1" style="height:auto">
<div id="Div2" style="height:100%;">
<div id="Div3" style="min-height:100%;"></div>
<div id="Div4" style="height:100%;"></div>
</div>
</div>
Also I put in my css file
html,body
{
height: 100%;
}
Problem is that neither Div3 nor Div4 have the expected height of 100%, I check size of first two divs with firbug and they are ok, filling the whole screen.
Sorry for my bad English, I hope that you understand my question :)
Have a look at this. When using a percentage, each div will be affected by the height of it's parent.
In this example the html,body has a height of 100% and the percentage of each div child is then relative to it's parent. Note how each div is half the size of it's parent div, each step it shrinks by half the size.
Updated with all percentage example
Simple example
HTML
<div>
<div>
<div>
<div></div>
</div>
</div>
</div>
CSS
html, body {
height: 100%;
}
div {
height: 100%;
background: #F00;
}
div div {
background: #FF0;
height: 50%;
}
div div div {
background: #000;
height: 50%;
}
div div div div {
background: #F30;
height: 50%;
}
First of all write height in inline style
<div id="Div4" height:100%;"></div>
change to
<div id="Div4" style="height:100%;"></div>
The key is to set the height of the div with id "Div1" to something other than "auto". Try 100% or a specific value like this
<div id="Div1" style="height:100%;">
<div id="Div2" style="height:100%;">
<div id="Div3" style="min-height:100%;"></div>
<div id="Div4" height:100%;"></div>
</div>
</div>
I have a webpage containing a centered container with content and I want to display a logo next to it.
The layout is as following: div - container. Where the container is centered and the div lef of the container needs to fill out the width left on the screen.
html, body {
height: 100%;
width: 100%;
}
#container {
width: 800px;
margin-left: auto;
margin-right: auto;
min-height: 100%;
}
<div id="container">
</div>
<div id="lef">
</div>
A jsfiddle with this code is available on http://jsfiddle.net/7QJQn/
This is the option that comes closed
http://jsfiddle.net/7QJQn/4/
I think that the best solution for doing something like this is just using javascript / jQuery.
Depending on which browsers you wish to support, you could use calc().
Basically, you want 50% of the viewport width (50vw) minus half of width of #container (so you're measuring from the center of your #container and you use half of all the values) - I'm assuming that you're OK with absolute positioning #lef to the viewport to keep it to the right?
CSS (fiddle here):
#lef {
background-color:yellow;
width:calc(50vw - 100px);
height:20px;
position:absolute;
right:0;
top:0;
}
Add this to your css:
#lef{
float:left
}
And change the order of the divs in the html, like this:
<div id="lef"></div>
<div id="container"></div>
First of all, you should wrap your markup in a wrapper div so elements stay tight.
I made some changes, take a look:
<div id="wrapper">
<div id="lef">
</div>
<div id="container">
</div>
</div>
And the css:
html, body {
height: 100%;
width: 100%;
}
#wrapper{
width: 360px;
}
#container {
width: 200px;
margin-left: auto;
margin-right: auto;
height: 100px;
background-color:red;
}
#lef {
background-color:yellow;
width: 160px;;
height:100px;
float: left;
}
Example
If using flexbox is an option, you can do this with the flex-grow property:
With the following markup
<div class="main-row">
<div class="filler"></div>
<div class="row-content">Fixed width centered div</div>
<div class="filler"></div>
</div>
you need to set flex-grow: 1 on the filler divs. See this fiddle.