I would like to have a customized box.
I should have a header for the box, where I can include button or text.
The box should have an image box on the left and text box on the right.
Both the boxes should be of the same height.
In the text box, I should be able to place buttons, text, links etc.
The background of the whole thing should be able to be customized.
How to do it?
first of all, if you want to ask a question, others must understand what actually the questioner wants. I hope something like this is what you are asking for.
.customizedBox {
border: 1px solid #111;
width: 500px;
height: 400px;
}
.header {
background-color: gray;
width: 100%;
height: 50px;
text-align: center;
}
.imageBox {
background-color: blue;
float: left;
width: 50%;
height: 350px;
}
.textBox {
background-color: green;
float: right;
width: 50%;
height: 350px;
}
<div class="customizedBox">
<div class="header">Header
</div>
<div class="imageBox">Image Box
</div>
<div class="textBox">Text Box
<button style="display: block;">Button</button>
<p>Paragraph</p>
A link
</div>
</div>
Related
I want to show multiple buttons side by side, which is not the problem.
But I have one or more buttons with wrapped text because the button is too small (this should be).
If the text of one button is wrapped, they do not appear correctly side by side.
The button with wrapped text is lower than the other.
What causes this and how can I prevent it?
.container {
width: 200px;
border: 1px solid black;
}
button {
width: 50%;
height: 40px;
}
<div class="container">
<button>TEST</button><button>TEST WRAPPED TEXT</button>
</div>
buttons are inline elements which are aligned baseline vertically by default...
...so use vertical-align:top to button...
Stack Snippet
.container {
width: 200px;
border: 1px solid black;
}
button {
width: 50%;
height: 40px;
vertical-align: top;
}
<div class="container">
<button>TEST</button><button>TEST WRAP TEXT</button>
</div>
display:flex on the .container does the trick.
Since you need the buttons to be 50% of its container, it is the best way to go.
.container {
width: 300px;
display: flex;
border: 1px solid black;
}
button {
flex: 1;
height: 40px;
}
<div class="container">
<button>TEST</button><button>TEST WRAPPED TEXT</button>
</div>
I have two divs next to each other. The div on the right is 300px x 335px. The div on the left goes all the way down the page. I want the width of the left div to go all the way until the right div. Then under the right div, it takes up the whole width of the page. Is this possible?
div elements are block level elements. So they are like square blocks. No, they can't work as you ask. However, you might Google for CSS Shapes to see if it can do what you wish but it's not available in all browsers and still isn't exactly the same as you request.
Here is some option either you can add min-width to the short div and long div to extend it. or you can add a background-color body to fake the illusion of it. but like Rob said there is no good way that can work out.
.short {
width: 100px; height: 100px;
background:red;
float:left;
//min-height: 500px;
}
.long {
width: 100px; height: 500px;
background:blue;
float:left;
//min-height: 500px;
}
.width {
width: 100%;
height: 200px;
background:yellow;
}
.clearfix {
overflow: auto;
zoom: 1;
}
body {
// background-color: red;
}
<div class="clearfix">
<div class="short"></div>
<div class="long"></div>
</div>
<div class="width"></div>
That is not possible, although you could always put another div under the one on the right and set the margin so that it looks like it's part of the one on the left.
This is one of the method to achieve what you want
CSS
#left1 {
margin-right: 300px;
height: 335px;
background: #aaa;
}
#right {
width: 300px;
height: 335px;
float: right;
}
#left2 {
background: #aaa;
border: 1px soild #000;
min-height: 300px;
}
<div id="right"></div>
<div id="left1"></div>
<div id="left2"></div>
EDIT: The problem is solved, so thanks to everyone who helped!
Original post:
So I am trying to put three divs next to each other (until thus far this part has been successful) with the third and last div to like go to attach to the bottom of the divs, which I have no clue how to do this.
How can I put the third div to attach to the bottom of the middle div and stay within the container?
To show you, I made a quick example. Something like this:
The black colour in the image is the 'body'.
The grey is a container div I put the three other divs in.
Each other box represents a div with what I want them to do and how approx. I want them to be positioned of one another.
I hope this can be done only using html and css. I would appreciate any help.
So far I have this as html for the divs:
#nav,
#textarea,
#contactallpages {
vertical-align: top;
display: inline-block;
*display: inline;
}
#containerpage {
position: relative;
margin: auto;
padding-top: 5%;
padding-bottom: 5%;
background-color: black;
height: 100%;
width: 70%;
}
#centercontainer {
background-color: lightblue;
width: 75%;
margin: 0 auto;
padding: 2%;
}
#nav {
float: left;
background: #aaaaaa;
height: 50%;
width: 15%;
padding: 1%;
}
#textarea {
display: inline-block;
background: #cccccc;
height: 70%;
width: 64%;
padding: 1%;
}
#contactallpages {
background: #bbbbbb;
position: absolute;
width: 15%;
padding: 1%;
bottom: 0;
}
<div id="containerpage">
<div id="centercontainer">
<div id="nav">
<ul>1
</ul>
<ul>2
</ul>
<ul>3
</ul>
</div>
<div id="textarea">
<header>
<h1>Welcome</h1>
</header>
<p>
Text text more text.
</p>
<p>
And more text.
</p>
</div>
<div id="contactallpages">
Random small textbox
<br>More small text.
</div>
</div>
</div>
The way you should lay this out is one container div and 3 children div's set to display: inline-block;
Using display: inline-block; will position all the div's next to each other and allows you to use the vertical-align property.
Now all you would need to do is set the proper vertical-alignment for each of the child div's. You can also set the height to the container div (#myPage) and that is the height that vertical-align will use to determine the positioning.
https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align
#myPage div {
display: inline-block;
width: 100px;
}
#centerFold {
height: 200px;
vertical-align: middle;
background-color: yellow;
}
#navBar, #contact{
height: 100px;
}
#navBar {
vertical-align: top;
background-color: red;
}
#contact {
vertical-align: bottom;
background-color: blue;
}
<div id="myPage">
<div id="navBar">
</div>
<div id="centerFold">
</div>
<div id="contact">
</div>
</div>
Try out flexbox if you do not have too much to worry about backward compatibility. My time at the moment doesn't allow to elaborate, but the essential part would be
#centercontainer {display: flex}
#contactallpages {align-self: flex-end}
Be aware though that some prefixing will be necessary for older browsers and this is only the standards-compliant solution. It does everything you want and you can forget about floating. Adding a
#textarea {flex-grow: 1}
would even allow the center to grow not only in height but in width also.
I'm not sure how I should go about this issue.
I'm fairly new to the front-end development so bear with me.
I have 4 boxes explaining the process step by step. I managed to
display them side by side by using the inline-block property. Now, I am trying to add 4 more small box looking buttons right on top of the boxes. Here is what I mean.
This is the index.html code.
<section>
<div class="how-text">
<h3>How to use SnappyApp</h3>
</div>
<div class="how-box">
<div class="idea-top">
</div>
<div class="idea">
</div>
<div class="scatch">
</div>
<div class="craft">
</div>
<div class="launch">
</div>
</div>
</section>
Here is the css code.
section {
height: auto;
padding-bottom: 100px;
background-color: #2c3e50;
}
.how-text {
text-align: center;
display: inline-block;
width: 100%;
color: white;
margin-top: 40px;
font-size: 30px;
letter-spacing: 3px;
}
.how-box {
text-align: center;
height: auto;
margin-top: 130px;
}
.idea {
background: url('img/idea.svg') center center no-repeat;
width: 200px;
height: 200px;
display: inline-block;
margin-right: 25px;
border: white solid medium;
}
.scatch {
background: url('img/scatch.svg') center center no-repeat;
width: 200px;
height: 200px;
display: inline-block;
margin-right: 25px;
border: white solid medium;
}
.craft {
background: url('img/craft.svg') center center no-repeat;
width: 200px;
height: 200px;
display: inline-block;
margin-right: 25px;
border: white solid medium;
}
.launch {
background: url('img/launch.svg') center center no-repeat;
width: 200px;
height: 200px;
display: inline-block;
margin-right: 25px;
border: white solid medium;
}
I also feel like my css code is very repetitive. If you have any suggestions, please help! I really appreciate all your help.
Thank you.
Here
https://jsfiddle.net/ds0md0xc/1/
EXPLANATION
All you need to do is to nest a child element in those divs. Since you specified them to be buttons. I used
<button>
element. But feel free to change it to a div if you want.
<div>
<button> </button>
</div>
For the css. It is going to be pretty simple just set width and height accordingly and it will position itself to the top.
button{
width:100%;
height: //whateveryouwant;
}
For the border, you dont need to have a second div. Just set the border bottom of the button as in fiddle
Hope this helps
here's a fiddle to demo
you should have a 'container' div to act as a parent and have both boxes as children :
<div class='super-box'>
<div class='button'> </div>
<div class='picture-box'> </div>
</div>
as far as your repetitive code, anything that repeats more than a few times (say 3 times) put it in a separate class and apply multiple classes to each div separated by a space
<div class='firstClass secondClass'></div>
Repeat your div called how-box. Here is a link to a fiddle that shows that: http://jsfiddle.net/eofct5ur/
Also your css could be cleaned up by doing something like this:
.idea, .scatch, .craft {
width: 200px;
height: 200px;
display: inline-block;
margin-right: 25px;
border: white solid medium;
}
then you would do:
.idea {
background: url('http://www.example.com/images/1.png');
}
and so forth for the other divs.
You can just wrap the button and the box inside 1 div.
In that manner they will be displayed one below another (set width: 100%).
So now you have 4 divs, with each inside a button and another div.
If you do then your inline-block on the first 4 divs they will be alined one next to another and inside you have your button and your text.
Greetings
div alignment one left next two top bottom last one right
it is nt coming like that when I'm doing
see this image
I would like to align the image like that with div tag, unfortunately when i aligned its not coming up like that,
how do i leyout all the images inside one div tag>?
here is my html code
<div class="site_contents">
<div class="header">
<div class="big_logo"></div>
<div class="work_nav"></div>
<div class="testimonial"></div>
<div class="cliants"></div>
<div class="testimonial"></div>
<div class="contact"></div>
</div>
</div
here is my css code
.site_contents {
height:auto;
width: 900px;
background-color: #666;
margin:0 auto;
}
.header {
background-color: #3CF;
height: 262px;
width:100%;
clear:both;
position:relative;
border:2px solid #000;
}
.header div
{
float: left;
}
.big_logo{
background-color: #06C;
height: 262px;
width: 459px;
background: url(images/sitetemplate_header.gif) 0 -21px;
}
.work_nav {
background-color: #F00;
height: 159px;
width: 170px;
}
.testimonial {
background-color: #3F9;
height: 104px;
width: 170px;
}
.cliants {
background-color: #09C;
height: 262px;
width: 171px;
}
.contact {
background-color: #30C;
height: 262px;
width: 101px;
}
could any one help me please
This is almost what you want. http://jsfiddle.net/
You need to be careful about a number of things.
work_nav and testimonial need to be in a separate div which I have included (container2)
The total width needs to be adjusted. I have changed it as well. You can play with it to make it according to what you need.
I have included borders as well to recognize each box. You should remove those borders and the width taken by the borders must be subtracted from the total current width. That means adjust the current width again.