Solved

What is the correct what to do a CSS sub class?

Posted on 2014-10-29
3
126 Views
Last Modified: 2014-10-30
Please have a look at my CSS code.  I'm pretty sure I'm doing this incorrectly and would like guidance on how to correct my code?

I have a parent css class of "wrapper".  I wanted to create sub-classes of "wrapper" and I'm not sure I'm doing it correctly.  Can you have a look at my code and provide suggestions for improvements.

Thanks!

<html>
<head>
<title>CSS</title>
<style>
.wrapper {
	width:100%;
}

.wrapper .formwrapper {
	width: 50%;
	padding: 5px;
}

.wrapper .formwrapper .mytextbox {
	color: red;
	float: left;
	width: 50%;
}

.wrapper .formwrapper .mybutton {
	color: red;
	float: left;
	width: 40%;
}

.wrapper .message {
	color: green;
	padding: 5px;
}


</style>
</head>
<body>

<div class="wrapper">
	<div class="title">This is my title</div>
    <div class="formwrapper">
    	<div class="mytextbox"><input name="firstName" type="text" /></div>
        <div class="mybutton"><input name="Submit" type="button" /></div>
    </div>
    <div class="message">Click The Button!</div>
</div>

</body>
</html>

Open in new window

0
Comment
Question by:cdemott33
3 Comments
 
LVL 58

Accepted Solution

by:
Gary earned 250 total points
ID: 40411883
Nothing wrong with what you have - whats the problem?
0
 
LVL 15

Assisted Solution

by:Insoftservice
Insoftservice earned 250 total points
ID: 40414048
I hope you have issue with the alignment .
If yes
Please try below code

You had missed to use

clear:both;


<html>
<head>
<title></title>
<style>
.wrapper {
	width:100%;
}

.wrapper .formwrapper {
	width: 50%;
	padding: 5px;
}

.wrapper .formwrapper .mytextbox {
	color: red;
	float: left;
	width: 30%;
}

.wrapper .formwrapper .mybutton {
	color: red;
	float: right;
	width: 70%;
}

.wrapper .message {
	color: green;
	padding: 5px;
}
.clearboth{
clear:both;
}


</style>
</head>
<body>

<div class="wrapper">
	<div class="title">This is my title</div>
    <div class="formwrapper">
    	<div class="mytextbox"><input name="firstName" type="text" value="" /></div>
        <div class="mybutton"><input name="Submit" type="button"  value="Submit" /></div>
    </div>
	<div class='clearboth'></div>
    <div class="message">Click The Button!</div>
</div>

</body>
</html>
                                  

Open in new window

0
 

Author Comment

by:cdemott33
ID: 40414099
I just wanted to make sure I was doing it correctly.  Thanks for confirming.
0

Featured Post

Courses: Start Training Online With Pros, Today

Brush up on the basics or master the advanced techniques required to earn essential industry certifications, with Courses. Enroll in a course and start learning today. Training topics range from Android App Dev to the Xen Virtualization Platform.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Safari On Gmail only html 12 53
push logos in footer up higher 5 20
Changing Two Areas of a Page 5 15
Center div containing a script 6 14
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …

785 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question