i am new to css .. i can easily fetch the suggestions from the back end to the suggestion div.
Height of suggestion div is set to height:auto as it is adjusted automatically depending on the suggestion as shown
<div class="suggestBox">
<div class="suggestionsBox" style="margin-left:16px">
<div class="suggestions bordered" style="height: auto; max-height: none; width:100%; overflow: hidden; padding: 0px; ">
<div class="jspContainer" style="width: 100%; height: 0px; ">
<div class="jspPane" style="padding: 0px; top: 0px; width: 100%; ">
<div class="items_block"></div>
<div class="users_block"></div>
</div>
</div>
</div>
</div>
but as it's height is altered i.e grown .. the elements under the suggestion box or div are scattered or something like that ... do i have to change something in CSS ..
//THANX
For maintaining depth of layers in CSS there is z-index property.
Try giving it position:absolute; to remove it from the document layout.
See this tutorial: http://www.barelyfitz.com/screencast/html-training/css/positioning/
Related
I am creating a sample website which has three divisions horizontally.
I want the left most div to be 25% width, the middle one to be 50% width, and right to be 25% width so that the divisions fill all the 100% space horizontally.
<html>
<title>
Website Title
</title>
<div id="the whole thing" style="height:100%; width:100%" >
<div id="leftThing" style="position: relative; width:25%; background-color:blue;">
Left Side Menu
</div>
<div id="content" style="position: relative; width:50%; background-color:green;">
Random Content
</div>
<div id="rightThing" style="position: relative; width:25%; background-color:yellow;">
Right Side Menu
</div>
</div>
</html>
http://imgur.com/j4cJu
When I execute this code, the divs appear over each other. I want them to appear beside each other!
How can i do this?
I'd refrain from using floats for this sort of thing; I'd rather use inline-block.
Some more points to consider:
Inline styles are bad for maintainability
You shouldn't have spaces in selector names
You missed some important HTML tags, like <head> and <body>
You didn't include a doctype
Here's a better way to format your document:
<!DOCTYPE html>
<html>
<head>
<title>Website Title</title>
<style type="text/css">
* {margin: 0; padding: 0;}
#container {height: 100%; width:100%; font-size: 0;}
#left, #middle, #right {display: inline-block; *display: inline; zoom: 1; vertical-align: top; font-size: 12px;}
#left {width: 25%; background: blue;}
#middle {width: 50%; background: green;}
#right {width: 25%; background: yellow;}
</style>
</head>
<body>
<div id="container">
<div id="left">Left Side Menu</div>
<div id="middle">Random Content</div>
<div id="right">Right Side Menu</div>
</div>
</body>
</html>
Here's a jsFiddle for good measure.
I know this is a very old question. Just posting this here as I solved this problem using FlexBox. Here is the solution
#container {
height: 100%;
width: 100%;
display: flex;
}
#leftThing {
width: 25%;
background-color: blue;
}
#content {
width: 50%;
background-color: green;
}
#rightThing {
width: 25%;
background-color: yellow;
}
<div id="container">
<div id="leftThing">
Left Side Menu
</div>
<div id="content">
Random Content
</div>
<div id="rightThing">
Right Side Menu
</div>
</div>
Just had to add display:flex to the container! No floats required.
You can use floating elements like so:
<div id="the whole thing" style="height:100%; width:100%; overflow: hidden;">
<div id="leftThing" style="float: left; width:25%; background-color:blue;">Left Side Menu</div>
<div id="content" style="float: left; width:50%; background-color:green;">Random Content</div>
<div id="rightThing" style="float: left; width:25%; background-color:yellow;">Right Side Menu</div>
</div>
Note the overflow: hidden; on the parent container, this is to make the parent grow to have the same dimensions as the child elements (otherwise it will have a height of 0).
Easiest way
I can see the question is answered , I'm giving this answer for the ones who is having this question in future
It's not good practise to code inline css , and also ID for all inner div's , always try to use class for styling .Using inline css is a very bad practise if you are trying to be a professional web designer.
Here in your question
I have given a wrapper class for the parent div and all the inside div's are child div's in css you can call inner div's using nth-child selector.
I want to point few things here
Do not use inline css ( it is very bad practise )
Try to use classes instead of id's because if you give an id you can use it only once, but if you use a class you can use it many times and also you can style of them using that class so you write less code.
Codepen link for my answer
https://codepen.io/feizel/pen/JELGyB
.wrapper {
width: 100%;
}
.box {
float: left;
height: 100px;
}
.box:nth-child(1) {
width: 25%;
background-color: red;
}
.box:nth-child(2) {
width: 50%;
background-color: green;
}
.box:nth-child(3) {
width: 25%;
background-color: yellow;
}
<div class="wrapper">
<div class="box">
Left Side Menu
</div>
<div class="box">
Random Content
</div>
<div class="box">
Right Side Menu
</div>
</div>
You add a
float: left;
to the style of the 3 elements and make sure the parent container has
overflow: hidden; position: relative;
this makes sure the floats take up actual space.
<html>
<head>
<title>Website Title </title>
</head>
<body>
<div id="the-whole-thing" style="position: relative; overflow: hidden;">
<div id="leftThing" style="position: relative; width: 25%; background-color: blue; float: left;">
Left Side Menu
</div>
<div id="content" style="position: relative; width: 50%; background-color: green; float: left;">
Random Content
</div>
<div id="rightThing" style="position: relative; width: 25%; background-color: yellow; float: left;">
Right Side Menu
</div>
</div>
</body>
</html>
Also please note that the width: 100% and height: 100% need to be removed from the container, otherwise the 3rd block will wrap to a 2nd line.
Get rid of the position:relative; and replace it with float:left; and float:right;.
Example in jsfiddle: http://jsfiddle.net/d9fHP/1/
<html>
<title>
Website Title </title>
<div id="the whole thing" style="float:left; height:100%; width:100%">
<div id="leftThing" style="float:left; width:25%; background-color:blue;">
Left Side Menu
</div>
<div id="content" style="float:left; width:50%; background-color:green;">
Random Content
</div>
<div id="rightThing" style="float:right; width:25%; background-color:yellow;">
Right Side Menu
</div>
</div>
</html>
apologies for my bad title explanation. I've got a code which I'm trying to restyle, part of which is below. The PHP document I'm using does a (JSON) query to get active "boxes" to show up on screen, and automatically orders them as a list. I want the queried boxes in 2 columns, it doesn't have to be an ordered list.
Problem is, there is no li class in my .php file so I'm thinking I'll have to edit one of the classes below to achieve this?
<div class="x-container max width agent-container" style="margin: 0px auto;padding: 0px;">'
<div class="x-column x-sm x-2-3";>
Is there a way to "add" li to the CSS or is there another way around it?
I know I can use a code like
display: block;
width: 50%;
float: left;
to add to my li class.. but I'd still need a li class right? Any help is greatly appreciated!
<div class="entry-content content homepage-agents">
<?php while(have_posts()): the_post();?>
<?php the_content();?>
<?php endwhile;?>
<div class="x-container max width agent-container" style="margin: 0px auto;padding: 0px;">
<div class="x-column x-sm x-2-3";>
<div class="agent-data">
<?php
/**
* Detect plugin. For use on Front End only.
*/
require_once(ABSPATH . 'wp-admin/includes/plugin.php');
if(is_plugin_active('consulenten-plugin-business/consulenten-plugin-business.php')): $jm_cplb = new ConsulentenpluginBusiness(); endif;
if(is_plugin_active('consulenten-plugin-lite/consulenten-plugin-lite.php')): $jm_cplb = new ConsulentenpluginLite(); endif;
$array_boxes = (array)$jm_cplb->jm_cplb_loadjson();
This is some css..
}
.agent-container {
margin-top: 60px !important;
margin-bottom: 60px !important;
}
.agent-item {
width: 100% !important;
margin-bottom: 60px;
}
How can I avoid line breaks in a div when I use a php funcion. My code is HTML is
<div class="toolbar">
<div style="float:left; ">
Profile <?php get_search_form(); ?>
</div>
</div>
and my code in css is
.toolbar {
background: #F2F2D7;
width: inherit;
font-family: "Palatino";
padding-top: 5px;
padding-bottom: 5px;
position: fixed;
top: 0;
box-shadow: 0px 4px 9px 2px #888888;
z-index:2;
white-space: nowrap;
}
with that I obtain something like:
<p> Profile </p> <p> Buscador </p>
<p> and what I want is </p>
Profile Buscador
It depends on what get_search_form() is returning. If it is returning a string, then you may need to look at the applied styling for the containing div.
If it is returning an an HTML fragment (e.g., <span>your result</span>), you may need to adjust the results to not include any embbed div tags.
It sounds like your looking for the <span> tag. Its used to divide segments of HTML for styling.
Yes, as user197092 said, this is a php problem, and if it is a predifined function it could be hard to adjust the result to not include embbed div tags. I solved it using flex, my code is:
<div id="toolbar">
<div id="toolbar1">
Profile
</div>
<div id="toolbar2">
<?php echo get_search_form(); ?>
</div>
</div>
and for CSS
#toolbar {
display: flex;}
#toolbar1 {
flex: 1;}
#toolbar2 {
flex: 2;
margin-left: 10px; }
this worked for me
I am useless at CSS and I am trying to create a two column equal width effect. The only issue is that I have some existing html that has to sit in the left hand box and will need to add elements to the right hand box.
This is the source that will be in the left hand side (I have included the CSS inline):
<div id="photoContainer" style="position:relative; width:400px; height: 400px;background:#845454;margin-left:20px;overflow: hidden;" >
<img id="imgPhoto" style="z-index:1000; position:absolute; left:60px; top:23px; width:280px; height:354px" alt="photo" src="images/model.png" class="resize" />
<img id="imgFrame" style="z-index:1005; position:absolute; left:0px; top:0px; width:400px; height:400px" alt="frame" src="images/wigs/Wig1.png" />
</div>
Try as I might, I can not get the CSS right to display the above in the left hand side and further controls in the right hand side.
Hopefully you can help me.
Thanks
not very clear what you have to do but in general:
<div id="container">
<div id="column1">...</div>
<div id="column2">...</div>
</div>
CSS:
#container {
float: left;
width: 100%;
}
#column1, #column2 {
width: 50%;
float: left;
}
Say I have code like such:
<div id="thisone">Content</div>
<div id="thatone">More Content</div>
Say both elements have a background color, so you can see their size, then is there a way to align the element with an id of #thisone according to the element with an id of #thatone? thanks!
(Edit: One of the elements has position:fixed, while the other is position:static)
Can you maybe explain a little better what you are trying to achieve? As you have added the "center" tag, maybe you want something like this?
<style>
#thisone {
background-color: red; width: 200px; height: 80px;
margin-left: auto; margin-right: auto;
}
#thatone {
background-color: blue; width: 200px; height: 80px;
margin-left: auto; margin-right: auto;
}
</style>
<div id="thisone">Content</div>
<div id="thatone">More Content</div>
(Which should center both divs in their parent)
set width of boths div's as equal( any number of pixel you want) and then add text-align :center in style,css